CSS : 설정 내용이없는 탐색의 링크를 분리해서하기

Question

을 강조 후에 내가 한 다음

#menu-main li a:after{ 
    content: " * "; 
} 

현재 항목은이 "*"이라고, 지금

text-decoration: underline; 

내 문제 추가 취득 또한 밑줄하지만

나는

#menu-main li a:after{ 
    text-decoration: none !important; 
} 

을 추가하려고하지 말았어야

하지만 아무 효과가 없습니다

누구나 텍스트를 밑줄이 쳐진 채로 유지하는 방법에 대한 아이디어가 있습니까?

Answer 1

정상적인 흐름에서 의사 요소는 요소의 크기를 확장하며 링크 자체의 밑줄이 밑줄입니다. 확인하려면 a:after {text-decoration: line-through;}을 추가하십시오. 더 이상 자신의 부모 요소의 크기에 영향을 미치지 의사 요소에 대한 position: absolute를 사용하는, 그래서 때 http://jsfiddle.net/Ronny/Smr38/

기본적으로 밑줄이 올바른 위치에서 절단 :

여기에 제안 된 솔루션입니다. 포인터 이벤트, 호버 상태 및 포커스 링과 같은 사항을 처리해야하지만 적어도 후자는 알아낼 수 있도록 남겨 둡니다.

Answer 2

당신이 마크 업의 제어에 있다면, 당신은

a { text-decoration: none } 
a span { text-decoration: underline } 

그렇게이 CSS의 :after pseudoelement의 원에 주입 된 내용을 귀하의 링크

<a href="..."><span>your link</span></a> 

의 범위를 삽입하고 사용할 수 있습니다 밑줄이 그어져있는 경우

그렇지 않은 경우 li:after (해당되는 경우)에 스타일을 적용 할 수 있습니다.

#menu-main li:after{ 
    content: " * "; 
} 

Answer 3

낡은 질문이지만 Google을 사용하여 찾은 것입니다. 따라서 "부모"의 크기에 기여하기 위해 의사 요소가 필요하고 절대 위치 지정이 필요한 경우 솔루션을 공유 할 것이라고 생각했습니다. 어떤 이유로 :

#menu-main li a:after{ 
    content: " * "; 
    display:inline-block; /* So we can set a width */ 
    width: 0; 
    margin-left: 10px; /* "Size" of the Pseudo-element */ 
} 

너비가 0이므로 text-decoration을 표시하지 않습니다. 이것은 또한 적은 코드와 허용되는 답변에 비해 스타일 간 의존성이 적습니다.

Answer 4

제 경우에는 너비가 필요하지 않습니다. 인라인 블록을 추가하는 것만으로도 작동합니다.