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

Resolving the :after Pseudo-Element Conflict with "text-decoration"

Originally posed to resolve the issue of appending images after links using :after, this question has resurfaced with a focus on appending variable width text.

The challenge lies in applying the "text-decoration: none" property to the :after pseudo-element while maintaining its content display. In Firefox and Chrome, the underline for the URL persists, negating the intended effect.

The key to overcoming this obstacle lies in setting the "display: inline-block" property for :after. This technique has been successfully tested in Chrome 25 and Firefox 19. Here's an example of how it works:

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

By setting "display: inline-block," you effectively convert the :after pseudo-element into a block-like element, allowing the "text-decoration" property to take effect as expected. This technique ensures that the underline no longer stretches across the URL, resulting in the desired visual effect.

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