CSS 강좌 | 선택자 > 가상 요소(Pseudo-elements)

가상 요소

가상 요소(Pseudo-elements)는 요소의 특정 부분을 선택합니다.

  • ::first-line
  • ::first-letter
  • ::before
  • ::after

가상 클래스는 콜론을 한 개(:), 가상 요소는 콜론을 두 개(::) 씁니다. 하지만 콜론을 한 개(:)만 써도 대부분의 브라우저에서 제대로 작동합니다.

::first-line

::first-line은 요소의 첫번째 줄을 선택합니다. 예를 들어

p::first-line {
  color: red;
}

p 요소의 첫번째 줄의 글자색을 빨간색으로 만듭니다.

::first-letter

::first-letter는 요소의 첫번째 문자를 선택합니다. 예를 들어

p::first-letter {
  color: red;
}

p 요소의 첫번째 문자의 색을 빨간색으로 만듭니다.

::before

::before는 요소의 앞을 선택합니다. 예를 들어

p::before {
  content: "xyz";
  color: red;
}

p 요소 앞에 xyz라는 단어를 넣고 색을 빨간색으로 만듭니다.

::after

::after는 요소의 뒤를 선택합니다. 예를 들어

p::after {
  content: "xyz";
  color: red;
}

p 요소 뒤에 xyz라는 단어를 넣고 색을 빨간색으로 만듭니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .a::first-line {
        color: red;
      }
      .b::first-letter {
        color: red;
      }
      .c::before {
        content: "Before - ";
        color: red;
      }
      .d::after {
        content: " - After";
        color: red;
      }
    </style>
  </head>
  <body>
    <p><code>::first-line</code></p>
    <p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
    <p><code>::first-letter</code></p>
    <p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><code>::before</code></p>
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><code>::after</code></p>
    <p class="d">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </body>
</html>

Category

Created on 2017-02-08 10:27 | Updated on 2017-02-08 10:27

이 글을 공유하기

Kakao