React.js guide to correctly applying the `:after` pseudo-element to styled components

Question

I discovered this beautiful underline animation

<ul>
  <li><a href="#">关于</a></li>
  <li><a href="#">作品集</a></li>
  <li><a href="#">博客</a></li>
  <li><a href="#">联系</a></li>
</ul>

body,html {
  margin: 0;
  font: bold 14px/1.4 'Open Sans', arial, sans-serif;
  background: #000;
}
ul { 
  margin: 150px auto 0; 
  padding: 0; 
  list-style: none; 
  display: table;
  width: 600px;
  text-align: center;
}
li { 
  display: table-cell; 
  position: relative; 
  padding: 15px 0;
}
a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  
  display: inline-block;
  padding: 15px 20px;
  position: relative;
}
a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
a:hover:after { 
  width: 100%; 
  left: 0; 
}
@media screen and (max-height: 300px) {
    ul {
        margin-top: 40px;
    }
}

I know I have to apply the above code to my NavItem component. Animation and everything is fine but it looks like it's working for my NavItem component but not for the entire navbar NavItem CSS and application images

I've only been a member for a few hours, so I don't know what the correct way is to display the site in my localhost. Sorry about May English too. :)

Answer 1

I recommend you to use css.modules and add a className in the component. First create a css module, which is very simple. Follow these steps:

• Create a css file in the same location as your component: name.module.css, create logic for your css
• Import this module for your component:

import classes from './name.module.css';

(The name of the constant is chosen by you)

• Add className in the component’s tag:

<NavItem className={classes.nameofclass} />

Verify whether the class has css code applied.