Panduan React.js untuk menggunakan elemen pseudo `:selepas` dengan betul pada komponen yang digayakan
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. :)
