You are on the editable version of MDN Web Docs

MDN 웹 문서 사용자로 보기: https://developer.mozilla.org/ko/docs/Web/CSS/::before

이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

CSS에서, ::before는 선택한 요소의 첫 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.

/* 링크 앞에 하트 추가 */
a::after {
  content: "";
}

참고: ::before::after로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로, <img><br>대체 요소에 적용할 수 없습니다.

구문

/* CSS3 syntax */
::before

/* CSS2 syntax */
:before

참고: 의사 클래스의사 요소를 구분하기 위해 CSS3부터::before 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 :before도 허용합니다.

예제

인용 표시 추가

One simple example of using ::before pseudo-elements is to provide quotation marks. Here we use both ::before and ::after to insert quotation characters.

HTML

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

CSS

q::before { 
  content: "«";
  color: blue;
}

q::after { 
  content: "»";
  color: red;
}

Result

장식 예제

We can style text or images in the content property almost any way we want.

HTML

<span class="ribbon">Notice where the orange box is.</span>

CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Result

할 일 목록

In this example we will create a simple to-do list using pseudo-elements. This method can often be used to add small touches to the UI and improve user experience.

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

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

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

Here is the above code example running live. Note that there are no icons used, and the check-mark is actually the ::before that has been styled in CSS. Go ahead and get some stuff done.

Result

특수문자

As this is CSS; not HTML, you can not use markup entities in content values. If you need to use a special character, and can not enter it literally into your CSS content string, use a unicodeescape sequence, consistingof a backslash followed by the hexadecimal unicode value.

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


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;
}

Result

명세

Specification Status Comment
CSS Pseudo-Elements Level 4
The definition of '::before' in that specification.
Working Draft No significant changes to the previous specification.
CSS Transitions Working Draft Allows transitions on properties defined on pseudo-elements.
CSS Animations Working Draft Allows animations on properties defined on pseudo-elements.
Selectors Level 3
The definition of '::before' in that specification.
Recommendation Introduces the two-colon syntax.
CSS Level 2 (Revision 1)
The definition of '::before' in that specification.
Recommendation Initial definition, using the one-colon syntax

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::beforeChrome Full support 1
Full support 1
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: :before
Edge Full support 12
Full support 12
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: :before
Firefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none.
Notes Before Firefox 3.5, only the CSS level 2 behavior of :before was supported, which disallowed position, float, list-style-* and some display properties.
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: :before
IE Full support 9
Full support 9
Full support 8
Alternate Name
Alternate Name Uses the non-standard name: :before
Opera Full support 7
Full support 7
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :before
Safari Full support 4
Full support 4
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :before
WebView Android Full support ≤37
Full support ≤37
Full support ≤37
Alternate Name
Alternate Name Uses the non-standard name: :before
Chrome Android Full support 18
Full support 18
Full support 18
Alternate Name
Alternate Name Uses the non-standard name: :before
Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none.
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :before
Opera Android Full support 10.1
Full support 10.1
Full support 10.1
Alternate Name
Alternate Name Uses the non-standard name: :before
Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
Full support 1.0
Full support 1.0
Alternate Name
Alternate Name Uses the non-standard name: :before
Animation and transition supportChrome Full support 26Edge Full support 12Firefox Full support 4IE No support NoOpera Full support 15Safari No support NoWebView Android Full support ≤37Chrome Android Full support 26Firefox Android Full support 4Opera Android Full support 14Safari iOS No support NoSamsung Internet Android Full support 1.5

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta
최종 변경자: alattalatta,