Panduan React.js untuk menggunakan elemen pseudo `:selepas` dengan betul pada komponen yang digayakan

Question

Saya menemui animasi garis bawah yang cantik ini

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

Saya tahu saya perlu menggunakan kod di atas pada komponen NavItem saya. Animasi dan semuanya baik-baik saja tetapi nampaknya ia berfungsi untuk komponen NavItem saya tetapi bukan untuk keseluruhan bar navigasi NavItem CSS dan imej aplikasi

Saya baru menjadi ahli selama beberapa jam, jadi saya tidak tahu cara yang betul untuk memaparkan tapak dalam localhost saya. Maaf tentang Bahasa Inggeris Mei juga. :)

Answer 1

Saya mengesyorkan anda menggunakan css.modules dan menambah className dalam komponen anda. Mula-mula buat modul css, yang sangat mudah. Ikuti langkah berikut:

• Buat fail css di lokasi yang sama dengan komponen anda: name.module.css, cipta logik untuk css anda
• Import modul ini untuk komponen anda:

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

(Nama pemalar dipilih oleh anda)

• Tambah className dalam tag komponen:

<NavItem className={classes.nameofclass} />

Sahkan sama ada kelas mempunyai kod css yang digunakan.