:after 및 가변 너비 텍스트를 사용하여 추가된 URL에서 밑줄을 제거하는 방법은 무엇입니까?

텍스트 장식 및 :after 의사 요소 해결

이전 문의에서 :after 의사 클래스를 사용하여 문제를 해결했습니다. 인쇄된 스타일 시트의 링크에 URL을 추가하는 문제가 발생했습니다. 그러나 제공된 답변은 충분하지 않은 것으로 나타났습니다.

가장 우려되는 점은 '텍스트 장식: 없음;'을 명시적으로 설정했음에도 불구하고 추가된 URL에서 기본 밑줄 스타일을 제거할 수 없다는 점이었습니다. 이로 인해 Firefox 및 Chrome과 같은 브라우저의 URL 아래에 보기 흉한 밑줄이 확장되었습니다.

가변 너비 텍스트를 위한 솔루션

이전에 제안된 솔루션에서는 패딩과 같은 기술을 사용했습니다. 문제가 있는 텍스트 장식 속성을 우회하기 위한 배경 이미지입니다. 다만, 추가되는 내용이 가변폭 텍스트인 경우에는 이 방법을 적용할 수 없습니다.

이 문제를 해결하려면 :after 의사 요소의 표시 속성을 'inline-block'으로 수정하세요. 이는 'text-꾸밈: 없음;'을 허용합니다. 다음 코드에 설명된 대로 선언이 적용됩니다.

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

이 조정된 CSS는 추가된 URL이 너비에 관계없이 밑줄 없이 표시되도록 합니다. 이 해결 방법을 적용하면 가변 너비 텍스트를 링크에 효과적으로 추가하고 원하는 색상을 지정할 수 있으므로 초기 문제를 해결하고 보다 세련된 URL 인쇄 렌더링을 제공할 수 있습니다.

위 내용은 :after 및 가변 너비 텍스트를 사용하여 추가된 URL에서 밑줄을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!