230203 CSS after::, before:: 사용법

::after (:after)

참고: https://developer.mozilla.org/ko/docs/Web/CSS/::after

CSS에서, ::after 는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성한다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용한다. 기본값은 인라인이다.
(CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있다.)

/* 링크 뒤에 화살표 추가 */
a::after {
  content: "→";
}

HTML

<p class="boring-text">적당히 평범하고 심심한 글입니다.</p>
<p>지루하지도 흥미진진하지도 않은 글입니다.</p>
<p class="exciting-text">MDN 기여는 쉽고 재밌습니다.</p>

CSS

.exciting-text::after {
  content: " <- 흥미진진!";
  color: green;
}

.boring-text::after {
  content: " <- 먼지풀풀";
  color: red;
}

결과)

---

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

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

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

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

참고: https://developer.mozilla.org/ko/docs/Web/CSS/::before

---