🚀 :before :after 에 text-decoration 효과 없애기

의사 클래스 선택자에 밑줄 효과 지우기

무색무취한 <a> 링크 태그를 꾸미기 위해 :before 나 :after 에 아이콘을 넣는 경우가 종종 있다.

이때 anchor 태그의 밑줄 효과인 text-decoration 속성을 텍스트에만 적용하고 content 속성의 아이콘 표시 부분은 적용하고 싶지 않을때가 있을텐데, 아무리 의사 선택자에 text-decoration 속성을 none으로 해도 밑줄이 지워지지 않은 현상 때문에 애로사항이 생겼을 것이다.

해결방법은 의사 선택자의 display 속성을 inline-block 으로 설정해주면 된다.

<a href="#">My link</a>

<a class="no-underline" href="#">My link</a>

a {
    text-decoration: underline;
}

a:before {
    content: "★";
}

a.no-underline:before {
    /* inline-block 설정하고 밑줄효과를 none으로 해주면 된다 */
    display: inline-block;
    text-decoration: none;
}

See the Pen :before에 text-decoration 없애기 by barzz12 (@inpaSkyrim) on CodePen.