pseudo-element (가상 요소)

::before

요소 내용 앞쪽에 새 컨텐츠를 추가.

p::before {
  content: "■ ";
}

p::before {
  content: ''; /* 빈 컨텐츠 표시 */
}
p::before {
  content: '문단 맨 앞에 텍스트 표시';
}
p::before {
  content: '??‍?'; /* 이모지 */
}
p::before {
  content: '\0244'; /* 캐릭터 코드 */
}

p::before {
  content: url(https://unsplash.it/15/15);
  margin-right: 0.625rem;
}

p::before {
  content: attr(data-before-text);
  background-color: aqua;
  margin-right: 0.625rem;
  padding: 0.625rem;
}

특히 데이터 속성("data-") 값을 가져올 수 있기 때문에 콘텐츠에 표시하는 동적인 내용들을 다루고 관리하기가 훨씬 쉬워집니다.

예제 1

• html

<button class="coupon" data-username="pondol"></button>

• css

button.coupon::before {
  display: block;
  content: attr(data-username) " 님을 위한 쿠폰";
  padding: 10px 20px;
  color: #ff8822;
}

See the Pen 스타일쉬트 - 링크된 이미지에 마우스 오브시 이미지가 움직임 by YoungHyeong Ryu (@YoungHyeong-Ryu) on

예제 2

• html

<p class="eventnotice" data-startday="2021-08-16" data-endday="2021-09-05"></p>

• css

p.eventnotice::before {
  content: "이벤트 기간은 " attr(data-startday) "일부터 " attr(data-endday) "까지입니다.";
  padding: 0.5em 2em;
  border-radius: 1em;
  background-color: #f0f0f0;
  border: 1px solid #a22;
}

See the Pen css -pseudo by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.

::selection

마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택.

article.content::selection {
  color: #00ff00;
}

::marker

목록 아이템 앞에 붙는 마커를 선택.

::first-letter

현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택.

::first-line

현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 줄 내용을 선택.