::before 가상 요소

::before 가상 요소 선택자는
선택한 요소의 실제 콘텐츠 바로 앞에(before) 첫 번째 자식인 스타일이 가능한 가상의 요소를 CSS로 생성하는 선택자입니다.

::before 가상 요소 선택자의 형식은 다음과 같습니다.

CSS ::before 가상 요소 선택자의 구문 
::before {
    content: /* value */;
    /* 가상 요소를 스타일할 속성들 */
}

content 속성을 필수적으로 지정해야 합니다.
이 속성은 ::before 가상 요소 선택자의 내부 콘텐츠 지정하는 속성입니다.
content 속성이 지정되어 있지 않거나, 유효하지 않는 값(예를 들어, none과 nomal)이 있는 경우에는 ::before 가상 요소 선택자가 작동하지 않습니다.

::before 가상 요소 선택자로 생성한 가상 요소는 display 속성의 초깃값이 inline입니다.

아래의 예시에서는 ::before 가상 요소 선택자가 어떻게 구현되는지를 잘 보여주고 있습니다.

CSS 
p::before {
    content: "👉";
    vertical-align: 0.2em;
    margin-right: 0.3em;
}
웹 페이지에서 이모지(이모티콘) 사용하기
HTML 
<p>
    문단의 콘텐츠입니다.
</p>
실제 적용된 모습

실제 적용된 모습은 ::before 가상 요소 선택자로 선택한 <p> 요소 앞에 가상의 첫 번째 자식 요소를 만들어 스타일한 것입니다.
마치 다음의 HTML 문서에 별도의 요소를 마크업한 것과 같은 구현입니다.

HTML 
<p>
    <before>👉</before> <!-- <before>라는 태그는 없습니다. 설명을 돕기위해 가상으로 마크업한 것입니다. -->
    문단의 콘텐츠입니다.
</p>

왜 사용할까

이처럼 ::before 가상 요소 선택자는 번거롭게 HTML 문서에 별도의 자식 요소를 콘텐츠 앞에 마크업하지 않고 편리하게 CSS로만 스타일이 가능한 가상 요소를 만들어 스타일하기 위해 사용합니다.

관련 선택자

::after 가상 요소 선택자는
선택한 요소의 실제 콘텐츠 영역 바로 뒤에(after) 마지막 자식인 스타일이 가능한 가상의 요소를 CSS로 생성하는 선택자입니다.

주의할 점

::before 가상 요소 선택자를 사용할 때에는 몇 가지 주의할 점이 있습니다.

웹 접근성 고려

::before 가상 요소 선택자로 만들어진 가상 요소는 HTML 요소가 아닌 CSS로 생성되는 요소입니다. 따라서 이 요소는 화면에만 보이며, 실제 HTML 구조에는 포함되지 않습니다. 이 특성 때문에 가상 요소의 콘텐츠에 사용자에게 중요한 정보를 담는 것은 스크린 리더를 사용하는 장애인에게 웹 접근성을 방해할 수 있습니다. 웹 접근성을 고려할 때, 가상 요소를 사용할 때는 사용자에게 필요한 정보를 적절히 제공하는 것이 핵심입니다.

다음은 "좋아요!"를 클릭하는 버튼을 만들 예시로 웹 접근성을 고려하지 않고 작성한 예시입니다.

CSS 
button::before {
    content: "🧡";
}
HTML <button> 태그에 실제 정보로 제공될 텍스트인 "좋아요!"가 없습니다. 
<button type="button"></button>
실제 적용된 모습

이렇게 <button> 태그에 실제 정보로 제공될 텍스트인 "좋아요!"가 HTML 정보에 없으면 스크린 리더를 사용하는 장애인에게는 아무런 정보도 제공할 수 없을 수 있습니다. 대부분의 스크린 리더는 이러한 정보를 사용자에게 제공하지 않습니다.

따라서, 위 HTML에 다음과 같이 사용자에게 정보를 제공할 다른 수단을 사용하는 것이 바람직합니다.

HTML 
<button type="button" aria-label="좋아요!"></button>

aria-label 속성은 웹 요소에 대한 대체 텍스트를 제공하는 데 사용됩니다. 이 속성의 값은 텍스트이며, 스크린 리더가 해당 요소를 읽어 사용자에게 전달할 때 이 텍스트를 사용합니다.

content 속성을 필수적으로 지정

::before 가상 요소 선택자는 content 속성을 필수적으로 지정해야 합니다.

지금까지의 예시들은 ::before 가상 요소 선택자로 만든 가상 요소에 content 속성으로 콘텐츠를 지정해서 스타일한 것입니다. 하지만, ::before 가상 요소 선택자로 만든 가상 요소에 콘텐츠가 필요하지 않고 스타일만을 지정하려고 한다면 어떻게 하면 될까요?

예를 들어, ::before 가상 요소 선택자로 만든 가상 요소로 단순히 원이나 사각형의 모양만을 만들어 스타일링하고 싶을 수 있습니다. 다음의 예시는 ::before 가상 요소 선택자를 사용해서 제목 요소를 장식으로 짧은 막대 모양을 스타일한 실제 모습입니다.

실제 적용된 모습
CSS 
h2::before {
    content: ""; /* <= 여기를 주목하세요. */
    display: block;
    width: 2em;
    height: 0.3em;
    background-color: #000;
    margin-bottom: 0.3em;
}
HTML 
<h2>가상 요소 선택자</h2>

위 예시를 보면 ::before 가상 요소 선택자로 만든 가상 요소에 콘텐츠가 필요하지 않고 제목 요소를 장식으로 짧은 막대 모양을 스타일만을 적용한 것입니다. 하지만 CSS를 보면 ::before 가상 요소 선택자에 content 속성의 값으로 빈 문자열("")이 값으로 지정되어 있습니다.

가장 흔한 실수입니다!
::before 가상 요소 선택자는 content 속성을 필수적으로 지정해야 합니다.
만약 지정하지 않으면 ::before 가상 요소 선택자는 적용되지 않습니다.

위의 예시처럼 ::before 가상 요소 선택자로 만든 가상 요소에 콘텐츠가 필요하지 않으면 빈 문자열(""이나 '')로 지정하면 됩니다.

포인터 이벤트가 적용되지 않음

::before 가상 요소 선택자로 만든 가상 요소는 말 그대로 가상의 요소로 사용되기 때문에 실제 요소에 적용되는 포인터 이벤트가 적용되지 않습니다.

  • 클릭
  • hover
  • active
  • focus
  • selection
  • 드레그
  • ...

위 리스트의 포인터 이벤트 등이 발생하지 않기 때문에 이 가상 요소에 :hover, :active, :focus 등의 가상 클래스 선택자나 ::selection 등의 가상 요소 선택자에서는 사용할 수 없습니다.

하위 콘텐츠를 가질 수 없는 빈 요소(Void element)에는 사용할 수 없음

시작하는 태그만 있어서 텍스트 노드나 중첩 요소를 가질 수 없는 빈 요소(예를 들어, <input>, <hr>, <img>)에서는 사용할 수 없습니다.

::before 가상 요소 선택자는 선택한 요소의 실제 콘텐츠 앞에(before) 가상 요소를 생성하는 선택자이지만 이러한 요소는 실제 콘텐츠 영역 자체가 없기 때문입니다.

CSS 빈 요소(예를 들어, <input>, <hr>, <img>)에서는 사용할 수 없습니다. 
input::before {
    content: "🧡";
}
img::before {
    content: "🧡";
}

활용 예시

::before 가상 요소 선택자는 번거롭게 HTML 문서에 별도의 요소를 콘텐츠 앞에 마크업하지 않고 편리하게 CSS로만 스타일이 가능한 가상 요소를 만들어 스타일하기 위해 사용합니다. 몇 가지 활용 예시를 살펴보겠습니다.

글로벌 푸터 등에 사용되는 네이게이션 아이템의 디바이더

HTML 
<nav>
    <ul>
        <li><a href="">제품 보기</a></li>
        <li><a href="">개인정보처리방침</a></li>
        <li><a href="">고객센터</a></li>
    </ul>
</nav>
HTML <nav> 태그
CSS 
ul {
    display: flex;
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
li:not(:first-child)::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.8em;
    background-color: rgba(0, 0, 0, .6);
    margin: 0 1.1em;
    vertical-align: -0.06em;
    white-space: nowrap;
}
CSS :first-child 가상 클래스 사용 방법
실제 적용된 모습

'뒤로 가기' 버튼의 화살표

HTML 
<a href="">뒤로 가기</a>
CSS 
a {
    color: inherit;
    text-decoration: none;
    padding: 0.5em 1em;
    background-color: #fff;
    border: 1px solid #777;
    border-radius: 0.5em;
    display: inline-flex;
    align-items: center;
}
a::before {
    content: "";
    display: inline-flex;
    width: 0.5em;
    height: 0.5em;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    transform: rotateZ(45deg);
    margin-right: 0.2em;
}
실제 적용된 모습

브라우저 호환성

::before 가상 요소 선택자의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
::before 1 12 1.5 4
Animation과 transition 지원 26 12 4 10.1

명세서

::before 가상 요소 선택자의 명세서 사양
명세서 사양
::before CSS Pseudo-Elements Module Level 4
#generated-content

참고문헌

같이 보기