[CSS] ::before/::after 선택자에 줄바꾸기/특수문자 입력하기

CSS에서 ::before 선택자는 선택한 요소의 콘텐츠 앞에 콘텐츠를 삽입합니다. 그리고 ::after 선택자는 선택한 요소의 콘텐츠 뒤에 콘텐츠를 삽입합니다.

예:

p::after {
content: " - 더 읽기";
}

이 경우 모든 <p> 요소 다음에 " - 더 읽기"라는 콘텐츠가 추가됩니다. 그러면 ::before, ::after 가상요소 콘텐츠 내에 줄바꾸기(Line-break)는 어떻게 추가할 수 있을까요? 다음과 같은 형식을 사용하면 줄바꾸기를 삽입할 수 있습니다.

#elementname::after {
content:"라인 1 \A 라인2 ";
white-space: pre; /* 또는 pre-wrap */
}

이외에도 CSS에서는 특수기호를 사용할 수 있습니다. 아래 사이트에서 CSS에서 사용 가능한 특수기호 목록을 확인할 수 있습니다.

• CSS/JS/HTML에서 사용 가능한 문자 엔티티(Character Entity)

§ 워드프레스에서 사용자 CSS 코드를 추가하는 방법은 여기를 참고하시기 바랍니다.