Before, After 선택자(Selector)

오늘은 Before와 After 선택자를 알아보자

이 선택자는 가상 요소를 선택하여 스타일을 줄 때에 사용된다.

이 Before과 After 이외에도 first-line, first-letter, selection, placeholder 등의 선택자가 있지만 추후 기회가 된다면 따로 포스팅하겠다.

우선 이 오늘 설명할 Before과 After의 사용 용도에 대해서 알아보도록 하자.

Selector	용도
:before	실제 내용 바로 앞에 생성되는 내부 엘리멘트
:after	실제 내용 바로 뒤에 생성되는 내부 엘리멘트

위의 표와 같이 요소의 전과 뒤에 새로운 요소 가상 요소를 생성하게된다.

그리고 CSS Rule에는 반드시 content라는 속성이 포함되어야 하는데, 새로 생성되는 가상 요소의 속성을 지정해야한다.

빈 값으로도 지정할 수 있기 때문에 content 속성이 반드시 포함되어야 한다.

추가하지 않을 경우 HTML에 추가되지 않는다.


#element::after,
#element::before {
    padding: 2px 4px;
    margin: 0 4px;
    border-radius: 3px;
    background-color: #eee;
}

#element::before {
    content: "before";
}

#element::after {
    content: "after";
}


<div id="element"></div>

위와 같이 #element 앞뒤로 before과 after 엘리멘트가 생성된다.

이처럼 가상의 Element를 생성하여 #element에 부가적인 효과등을 부여할 수 있다.

다람쥐 헌 쳇바퀴에 타고파

Before, After 선택자(Selector)