::before

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS에서, ::before 는 선택된 요소의 첫번째 자식인 의사 요소를 생성합니다. 이는 종종 content 속성을 활용하여 요소에 장식 콘텐츠를 추가하는 데에 사용됩니다. 기본적으로 인라인 형식입니다.

시도해 보기

a { color: #0000ff; text-decoration: none; } a::before { content: "🔗"; } .local-link::before { content: url("/shared-assets/images/examples/firefox-logo.svg"); display: inline-block; width: 15px; height: 15px; margin-right: 5px; } 
<p> Learning resources for web developers can be found all over the internet. Try out <a href="https://web.dev/">web.dev</a>, <a href="https://www.w3schools.com/">w3schools.com</a> or our <a href="https://developer.mozilla.org/" class="local-link">MDN web docs</a>. </p>

참고 :>::before 와 ::after 로 생성된 의사 요소들은 마치 해당 요소가 적용된 요소의 직속 자식인 것처럼 생성된 박스입니다. 즉, 원본 요소의 직계 자식이기 때문에 <img> 처럼 콘텐츠가 CSS 서식 모델의 범위를 벗어나는 대체 요소 에는 적용할 수 없습니다.

구문

css
::before { content: /* value */; /* properties */ }

content 속성이 정의되지 않았거나 유효하지 않은 값을 가지거나, 값으로 normal 이나 none 을 가지고 있다면 ::before 가상 요소는 렌더되지 않고 display: none 이 설정된 것처럼 동작합니다.

Note: 선택자 레벨 3 에서는 콜론 표기법인 ::before 를 의사 요소 의 의사 클래스 의 하나로 소개합니다. 브라우저는 세미콜론 표기인 :before 도 수용하며, 이는 CSS2에서 소개되어 있습니다.

접근성

스크린 리더에서는 원활히 접근되지 않기 때문에 콘텐츠를 추가하기 위해 ::before 의사 요소를 사용하는 것은 권장되지 않습니다.

예제

인용 표시 추가하기

아래는 ::before 의사 요소를 사용하여 인용 표시를 추가하는 예제입니다. 인용 문자를 추가하기 위해 ::before 와 ::after 를 모두 사용합니다.

HTML

html
<q>Some quotes</q>, he said, <q>are better than none.</q>

CSS

css
q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; }

결과

장식 예제

content 속성 내의 텍스트나 이미지 또한 원하는대로 수정할 수 있습니다.

HTML

html
<span class="ribbon">오렌지색 박스가 어디에 있는지 보세요.</span>

CSS

css
.ribbon { background-color: #5bc8f7; } .ribbon::before { content: "여기 오렌지색 박스가 있습니다."; background-color: #ffba10; border-color: black; border-style: dotted; }

결과

투두 리스트

이번 예제에서는 의사 요소를 활용하여 투두 리스트를 만듭니다. 여기서는 적은 공수를 들여 UI 와 사용자 경험을 향상시켰습니다.

HTML

html
<ul> <li>Buy milk</li> <li>Take the dog for a walk</li> <li>Exercise</li> <li>Write code</li> <li>Play music</li> <li>Relax</li> </ul>

CSS

css
li { list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ""; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; }

JavaScript

js
const list = document.querySelector("ul"); list.addEventListener( "click", (ev) => { if (ev.target.tagName === "LI") { ev.target.classList.toggle("done"); } }, false, );

위 코드가 실행된 이후의 결과를 확인할 수 있습니다. 아무런 아이콘도 사용되지 않았고, 체크 표시는 보이는 바와 같이 CSS 내의 스타일에서 ::before 에 설정된 것입니다. 몇 가지 일을 완료로 처리해 보세요.

결과

특수 문자

HTML이 아니라 CSS라는 특성 때문에 마크업 요소들을 콘텐츠 값에 사용할 수 없습니다. 만일 특수 문자를 사용해야 하는데 CSS 콘텐츠 문자열에 직접 입력할 수 없는 경우, 백슬래시와 16진수 유니코드 값으로 구성된 유니코드 이스케이프 시퀀스를 사용하십시오.

HTML

html
<ol> <li>Crack Eggs into bowl</li> <li>Add Milk</li> <li>Add Flour</li> <li aria-current="step">Mix thoroughly into a smooth batter</li> <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li> <li>Fry until the top of the pancake loses its gloss</li> <li>Flip it over and fry for a couple more minutes</li> <li>serve with your favorite topping</li> </ol>

CSS

css
li { padding: 0.5em; } li[aria-current="step"] { font-weight: bold; } li[aria-current="step"]::after { content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/ display: inline; }

결과

명세서

Specification
CSS Pseudo-Elements Module Level 4
# generated-content

브라우저 호환성

같이 보기