줄 바꿈 시 두꺼운 밑줄이 작동하는지 확인하는 방법은 무엇입니까?

Question

다음 코드를 사용하여 하이퍼링크에 더 두껍고 스타일화된 밑줄 장식을 추가합니다.

a { 텍스트 장식: 없음 위치: 상대;}

a:hover { 색상: #c0632e }

a::after { 내용: "" 위치: 너비: 100% 높이: 30%;
        하단: 0; 왼쪽: 0; 배경색: #2EB0C0;
        불투명도: 0.15; Z-색인: -1;
    
a:hover::after { 배경색: #c0632e }

그러나 클래스로 변환하고 각 링크에 로 추가하는 경우에만 작동합니다. 전역적으로 구현하려고 하면 하이퍼링크 중간에 개행 문자가 있으면 작동하지 않습니다. 줄 바꿈이 없으면 제대로 작동하지만 줄 바꿈이 있으면 작동하지 않습니다.

각 하이퍼링크에 대해 를 정의하지 않고도 전역적으로 사용할 수 있도록 이 문제를 해결할 수 있는 방법이 있나요?

Answer 1

저도 최근에 같은 문제에 직면했습니다. ::after 대신 테두리 하단을 사용하는 것이 좋습니다. 이것을 시도해 보세요:

으아악

rem 대신 px를 사용하여 크기를 지정할 수도 있습니다. 표시되지 않으면 테두리 색상을 지정하는 것을 잊지 마세요

으아악