인쇄 매체의 링크에 대한 의사 요소 이후에 '텍스트 장식: 없음'이 작동하지 않는 이유는 무엇입니까?

재검토: "텍스트 장식" 및 ":after" 의사 요소 사용

기존 문제를 해결하기 위한 시도로, 질문이 제기됩니다: 링크에 텍스트를 추가하기 위해 ":after" 의사 요소와 함께 사용할 때 "text-장식: 없음" 속성이 효과가 없는 것처럼 보이는 이유는 무엇입니까? 특히 인쇄 매체에서는 방해가 되는 밑줄 없이 링크 텍스트 뒤에 URL을 표시하는 것이 원하는 결과입니다.

원래 질문은 고정 크기 이미지를 추가하는 데 중점을 두었지만 이 쿼리는 콘텐츠가 가변 너비 텍스트입니다. 이전 답변에서 텍스트 콘텐츠에 적합하지 않은 패딩 및 배경 이미지를 사용하라고 제안한 것처럼 대체 접근 방식을 모색합니다.

답변:

해결책은 "display: inline-block" 속성을 ":after" 의사 요소에 추가합니다. 이렇게 하면 "텍스트 장식: 없음" 속성을 효과적으로 사용하여 밑줄을 제거할 수 있습니다.

시연하기 위해 다음 코드는 이제 예상대로 작동합니다.

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

이것은 Chrome 25 및 Firefox 19에서 테스트되었으며 URL 텍스트를 계속 표시하면서 밑줄을 성공적으로 숨겼습니다.

위 내용은 인쇄 매체의 링크에 대한 의사 요소 이후에 '텍스트 장식: 없음'이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!