Saya cuba menjadikan elemen label <a> menghidupkan garis bawah pada tuding, serupa dengan contoh pertama pada halaman ini. Hampir berasa bodoh untuk bertanya soalan ini kerana tutorial ada tetapi apa yang saya lakukan tidak berfungsi dan saya tidak tahu mengapa.
Ini kandungan CSS saya
#about-text-box a {
text-decoration: none;
font-size: 17pt;
font-family: 'Silkscreen', cursive;
color: #ECE0E7;
text-align: center;
width: 95%;
text-shadow: 2px 2px 2px #101400;
transition: 0.5s;
}
#about-text-box a:hover::after, #about-text-box a:focus::after {
opacity: 1;
transform: translate3d(0, 0.2em, 0);
}
#about-text-box a::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.1em;
background-color: inherit;
opacity: 0;
transition: opacity 300ms, transform 300ms;;
}
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya perasan beberapa sifat yang hilang:
content: ''丢失。对于伪元素，a::after上的content属性可以为空"", tetapi mesti dinyatakan.position:relative需要位于a上，因为伪元素a::after使用position:relative.a::after正在使用background-color:inherit但似乎没有任何可以继承的值。我现在给它一个值hotpinkTetapi ini boleh disesuaikan dengan mana-mana warna.a上添加了cursor:pointerjadi ia lebih menepati hasil yang anda inginkan.Semoga ini membantu!
Contoh: (lihat demo langsung dengan butang di bawah)
#about-text-box { display: flex; } #about-text-box a { display: block; position: relative; padding: 0.2em 0; cursor: pointer; text-decoration: none; font-size: 17pt; font-family: "Silkscreen", cursive; color: #ece0e7; text-align: center; text-shadow: 2px 2px 2px #101400; transition: 0.5s; } #about-text-box a:hover::after, #about-text-box a:focus::after { opacity: 1; transform: translate3d(0, 0.2em, 0); } #about-text-box a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.1em; background-color: hotpink; opacity: 0; transition: opacity 300ms, transform 300ms; }