[CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (content url)

가상요소 ::after, ::before에 'content'에 svg 이미지를 로드하여 요소를 꾸며줄 수 있다.

이렇게 구성하면 svg를 <div>나 <img>를 통해 따로 나타낼 필요없이 class만으로 표현이 가능하기 떄문에 관리하기 편하고 코드가 간결해져 가독성도 올라간다.

 

예시는 다음과 같다.

<style>
    .more-link {
        display: flex;
        justify-content: center;
        width: 65px;
        text-decoration: none;
        color: black;
        border: 1px solid lightpink;
        border-radius: 4px;
        padding: 3px 5px;
    }
    
    .more-link::after {
        content: url("right-arrow.svg");
        display: block;
        width: 1em;
        margin-top: 1px;
        margin-left: 9px;
        line-height: 50%;
    }
</style>

<a class="more-link" href="/test-page">more</a>

** svg의 width를 꼭 설정해주어야한다.

** svg가 기본적으로 차지하는 빈 공간의 면적을 'line-height'을 통해 줄일 수 있다. (텍스트도 마찬가지)