>웹 프론트엔드 >CSS 튜토리얼 >인쇄된 미디어에서 ':after' 의사 요소를 사용할 때 'text-꾸밈: 없음'이 링크에서 밑줄을 제거하지 못하는 이유는 무엇입니까?

인쇄된 미디어에서 ':after' 의사 요소를 사용할 때 'text-꾸밈: 없음'이 링크에서 밑줄을 제거하지 못하는 이유는 무엇입니까?

Linda Hamilton
Linda Hamilton원래의
2024-11-19 03:46:02831검색

Why Does

인쇄 매체 양식화에서 "텍스트 장식"과 ":after" 의사 요소의 역할 재검토

인쇄 스타일에서 ":after" 의사 요소를 사용하여 링크 뒤에 추가 정보를 표시하려는 욕구가 자주 발생합니다. 그러나 이렇게 간단해 보이는 작업을 달성하는 데에는 어려움이 따를 수 있습니다. 특히, 링크에서 기본 밑줄을 제거하기 위한 "text-장식" 속성이 일부 브라우저에서 예상치 못한 동작을 보이는 것으로 관찰되었습니다.

초기 접근 방식: 문제 발생

":after" 의사 요소를 사용하여 링크 뒤에 URL을 추가하려는 초기 시도에서 다음 스타일시트는 다음과 같습니다. 채용:

a:after {
  content: " <" attr(href) ">";
  text-decoration: none;
}

사용자는 실망스럽게도 이 접근 방식은 성공하지 못했습니다. Firefox 및 Chrome에서는 "text-장식: 없음" 선언이 무시되어 표시된 URL 하단에 보기 흉한 밑줄이 확장되었습니다.

딜레마 해결: "display: inline- 소개" block"

经过一番探索, 사용자는 다음과 같은 문제를 해결하는 솔루션을 우연히 발견했습니다. 문제. ":after" 의사 요소에 "display: inline-block"을 적용함으로써 "text-장식" 속성이 예상대로 작동하기 시작했습니다.

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

이 수정을 통해 링크는 인라인 블록으로 표시되므로 사용된 브라우저에 관계없이 "text-장식" 속성을 사용하여 밑줄을 효과적으로 제거할 수 있습니다.

위 내용은 인쇄된 미디어에서 ':after' 의사 요소를 사용할 때 'text-꾸밈: 없음'이 링크에서 밑줄을 제거하지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.