애니메이션 텍스트 밑줄 만들기: 단계별 가이드

Question

이 페이지의 첫 번째 예와 유사하게 마우스를 올리면 <a> 레이블 요소에 밑줄이 생기도록 만들려고 합니다. 튜토리얼이 거기에 있지만 내가 하고 있는 일이 작동하지 않고 이유를 모르기 때문에 이 질문을 하는 것이 거의 어리석은 것처럼 느껴집니다.

이것은 내 CSS 콘텐츠입니다

으아악 으아악

Answer 1

몇 가지 속성이 누락된 것을 발견했습니다.

1. content: ''a::after 上的 丢失。对于伪元素，content 属性可以为空 "", 하지만 지정해야 합니다.
2. position:relative 需要位于 a 上，因为伪元素 a::after 使用 position:relative.
3. a::after正在使用background-color:inherit但似乎没有任何可以继承的值。我现在给它一个值 hotpink 하지만 이것은 어떤 색상으로도 맞춤 설정할 수 있습니다.
4. 저는 a 上添加了 cursor:pointer에 있어서 원하는 결과에 더 부합하네요.

도움이 되기를 바랍니다!

예: (아래 버튼이 있는 라이브 데모 참조)

으아아아 으아아아