[CSS] ::before / ::after

이번 포스팅에서는 추가 컨텐츠를 삽입하기 위해서 사용되는 ::before과 ::after에 대해서 알아보겠습니다.

Pseudo Element

::before과 ::after는 CSS에서 소위 pseudo element라고 하는데요. 일반적인 CSS 선택자(selector)로는 지정할 수 없는 미세한 영역을 선택하기 위해서 사용됩니다. 본 포스팅에서 다룰 ::before과 ::after뿐만 아니라 ::first-letter, ::first-line, ::selection, ::marker 등 CSS에는 다양한 pseudo element가 있습니다.

pseudo element는 선택자 뒤에 붙여주는데 CSS3 문법 상 : 기호를 사용하는 pseudo class와 구분해주기 위해서 원칙적으로는 :: 기호를 사용해야 하지만 : 기호를 사용하더라도 대부분 브라우저에서 문제없이 작동을 합니다. 예를 들어, ::before pseudo element는 다음과 같이 두가지 문법을 모두 사용할 수 있습니다.

div::before {
  content: "before";
}

div:before {
  content: "before";
}

은근히 많은 분이 햇갈려하는 부분이라서 먼저 짚고 넘어가고 싶었습니다. pseudo element에 대한 좀 더 전반적인 내용은 관련 MDN 문서를 참고 바랍니다.

::before / ::after

::before과 ::after이 적용된 간단한 다음 사례를 먼저 볼까요?

목록에서 star 클래스가 적용된 항목은 앞에 별 아이콘이 붙어있고, heart 클래스가 적용된 항목은 뒤에 하트 아이콘이 붙어 있습니다.

CSS 코드를 보면 star 클래스에는 ::before를 heart 클래스에는 ::after가 사용하여 content 속성에 해당 아이콘을 명시해준 것을 볼 수 있습니다.

.star::before {
  content: "⭐";
}

.heart::after {
  content: "❤️";
}

여기서 우리는 ::before 또는 ::after를 사용해서 content 속성값이 선택된 엘리먼트의 앞또는 뒤에 삽압되는 것을 알 수 있습니다.

브라우저 개발자 도구로 좀 더 자세히 해당 엘리먼트를 살펴보면, ::before/::after라는 placeholder가 엘리먼트 안에 삽입된 것을 볼 수 있습니다.

<li class="heart">
  "CSS"
  ::after
</li>
<li class="star">
  ::before
  JavaScript
</li>

::before/::after를 사용할 때 주의할 점이 바로 해당 엘리먼트 앞뒤로 새로운 엘리먼트를 삽입되는 것이 아니라 해당 엘리먼트 내부의 맨 앞 또는 맨 뒤에 컨텐츠만 삽입된다는 것입니다.

참고로 content 속성에는 단순 텍스트 뿐만 아니라 이미지도 사용할 수 있습니다.

[예제] 특수 기호 삽입

::before과 ::after가 실전에서 많이 사용되는 사례로 특수 기호 넣기를 들 수 있습니다.

다음과 같은 HTML 코드를 예로 들어 봅시다.

<figure>
  <blockquote>
    당신이 언젠가 죽을 것이라는 사실을 기억하는 것이야말로 무언가 잃을지도
    모른다는 두려움에 갖히는 것을 피할 수 있는, 제가 아는 가장 최고의
    방법입니다.
  </blockquote>
  <figcaption>
    <cite>스티브 잡스</cite>
  </figcaption>
</figure>

먼저 <blockquote>으로 마크업되어 있는 명언 부분에는 앞뒤로 인용 부호를 넣어보겠습니다.

blockquote::before {
  content: "“";
}

blockquote::after {
  content: "”";
}

그리고 <cite>로 마크업되어 있는 저자 부분에는 앞에만 대시 부호를 넣어보겠습니다.

cite::before {
  content: "—";
}

이렇게 약간의 특수 기호만 추가되어도 컨텐츠가 훨씬 맛깔나보이지 않나요?

이쯤에서 뭐하러 복잡하게 CSS로 이 걸 하냐? HTML 코드에 바로 특수 기호를 넣으면 안되냐? 라고 물어보시는 분이 있으실텐데요.

한 번 명언이나 저자 부분을 복사해보시면 CSS로 삽입된 특수 기호는 포함이 되지 않는 다는 것을 볼 수 있으실 거에요. 만약에, 특수 기호까지 함께 복사가 되었다면 사용자 입장에서는 특수 기호를 제거해줘야 되서 번거로웠겠지요?

즉, 이렇게 CSS로 삽입된 특수 기호는 어디까지나 스타일 목적이며 브라우저에서 실제 컨텐츠로 다루어지지는 않습니다. 실제 컨텐츠로 다뤄져야하는 경우에는 당연히 평소처럼 HTML을 사용하셔야 합니다.

마치면서

지금까지 CSS의 pseudo element인 ::before과 ::after를 사용하는 방법에 대해서 간단히 알아보았습니다. 추후 기회가 되면 다른 활용 사례에 대해서도 다뤄보도록 하겠습니다.