Ich versuche, das Labelelement <a> beim Hover unterstreichen zu lassen, ähnlich dem ersten Beispiel auf dieser Seite. Es kommt mir fast dumm vor, diese Frage zu stellen, denn das Tutorial ist zwar da, aber das, was ich mache, funktioniert nicht und ich weiß nicht, warum.
Das ist mein CSS-Inhalt
#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;;
}
我注意到一些缺失的属性：
content: ''丢失。对于伪元素，a::after上的content属性可以为空""，但必须指定。position:relative需要位于a上，因为伪元素a::after使用position:relative。a::after正在使用background-color:inherit但似乎没有任何可以继承的值。我现在给它一个值hotpink，但这可以自定义为任何颜色。a上添加了cursor:pointer，因此它更符合您想要的结果。希望这会有所帮助！
示例：（请参阅下面带有按钮的现场演示）
#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; }