:after 의사 요소와의 '텍스트 장식' 충돌을 해결하는 방법은 무엇입니까?

"텍스트 장식"과의 :after 의사 요소 충돌 해결

원래는 다음을 사용하여 링크 뒤에 이미지를 추가하는 문제를 해결하기 위해 제기되었습니다. :after, 이 질문은 가변 너비 텍스트 추가에 초점을 맞춰 다시 나타났습니다.

문제는 내용 표시를 유지하면서 :after 의사 요소에 "text-장식: 없음" 속성을 적용하는 것입니다. Firefox 및 Chrome에서는 URL에 대한 밑줄이 지속되어 의도한 효과를 무효화합니다.

이 장애물을 극복하는 열쇠는 :after에 대한 "display: inline-block" 속성을 설정하는 데 있습니다. 이 기술은 Chrome 25 및 Firefox 19에서 성공적으로 테스트되었습니다. 작동 방식의 예는 다음과 같습니다.

a:after {
    content: " <" attr(href) ">";
    text-decoration: none;
    display: inline-block;
    color: #000000;
}

"display: inline-block"을 설정하면 :after 의사 요소를 다음으로 효과적으로 변환할 수 있습니다. 블록과 같은 요소로 "텍스트 장식" 속성이 예상대로 적용되도록 합니다. 이 기술을 사용하면 밑줄이 더 이상 URL 전체에 걸쳐 늘어나지 않아 원하는 시각적 효과를 얻을 수 있습니다.

위 내용은 :after 의사 요소와의 '텍스트 장식' 충돌을 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!