링크의 가상 클래스 텍스트 장식 후 CSS

Question

내 질문의 목표는 링크 뒤에 파일 유형을 추가하는 코드를 작성하여 사람들이 특별한 파일을 기대해야하는지 알 수 있도록하는 것입니다. 이제는 이미지를 사용하여이 작업을 수행 할 수있는 옵션이 있지만 정말 좋아하지는 않으며 크기가 다른 대괄호 사이에 파일 형식을 사용하는 것을 선호합니다. 내 접근 방식은 : after pseudoclass를 다음과 같이 사용하는 것입니다.

a[href$='.doc']:after, a[href$='.rtf']:after { 
content: " [DOC]"; 
font-family: Monospace; 
font-size: 60%; 
font-weight:bolder; 
color:red; 
position:relative; 
top: -0.8em;  
} 

그러나 이것은 매우 이상한 문제를 일으 킵니다. 콘텐츠는 링크의 일부인 블록에있는 것 같습니다. 따라서 "[DOC]"링크 아래에 링크 밑줄이 계속됩니다.

질문은 꽤 간단합니다. 다른 방법으로 이것을 수행하거나 링크 아래에있는 것과 별도로 "[DOC]"아래에있는 것을 제어 할 수있는 방법이 있습니까?

Answer 1

나는 누군가가 아래로 급습하고 깨끗한 방법을 가리 킵니다 희망하지만,이 작품 :

Live Demo

HTML :

<a href="lol.doc"><span>lol</span></a> 

CSS :

a { 
    text-decoration: none 
} 
a span { 
    text-decoration: underline 
} 
a[href$='.doc']:after, a[href$='.rtf']:after { 
    content: " [DOC]"; 
    font-family: Monospace; 
    font-size: 60%; 
    font-weight:bolder; 
    color:red; 
    position:relative; 
    top: -0.8em; 
} 

Answer 2

디스플레이 추가 시도 : 인라인 블록;

a[href$='.doc']:after, a[href$='.rtf']:after { 
content: " [DOC]"; 
display: inline-block; 
font-family: Monospace; 
font-size: 60%; 
font-weight:bolder; 
color:red; 
position:relative; 
top: -0.8em;  
} 

IE에서는 테스트하지 않았지만 IE에는 특성 선택기와 다음과 같은 문제가 있다고 생각됩니다.

Answer 3

전체 : 나는 (브라우저를 지원할 때) 좀 더 튼튼한 것 같아서 이미지를 고수 할 것입니다. 세상에 대한 나의 순진한 견해는 평범한 텍스트가 이미지보다 항상 쉬워 져야한다는 것입니다.).