React.js-Anleitung zur korrekten Anwendung des „:after“-Pseudoelements auf gestaltete Komponenten

Question

Ich habe diese wunderschöne Unterstreichungsanimation entdeckt

<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;
    }
}

Ich weiß, dass ich den obigen Code auf meine NavItem-Komponente anwenden muss. Animation und alles ist in Ordnung, aber es sieht so aus, als ob es für meine NavItem-Komponente funktioniert, aber nicht für die gesamte Navigationsleiste NavItem CSS und Anwendungsbilder

Ich bin erst seit ein paar Stunden Mitglied und weiß daher nicht, wie ich die Seite in meinem Localhost richtig anzeigen soll. Tut mir auch leid wegen May English. :)

Answer 1

我建议您使用css.modules并在组件中添加一个className。首先创建css模块，很简单。按照以下步骤进行操作：

• 在与您的组件相同的位置创建一个css文件：name.module.css，为您的css创建逻辑
• 为您的组件导入此模块：

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

(常量的名称由您自己选择)

• 在组件的标签中添加className：

<NavItem className={classes.nameofclass} />

验证类是否应用了css代码。