타이포그래피
content
before 및 after 의사 엘리먼트의 콘텐츠를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
content-[<value>] | content: <value>; |
content-(<custom-property>) | content: var(<custom-property>); |
content-none | content: none; |
예제
기본 예제
content-[<value>] 구문과 before, after 변형을 함께 사용하여 ::before와 ::after 의사 엘리먼트의 내용을 설정할 수 있습니다:
<p>고해상도는 단순히 더 나은 품질의 이미지를 의미하는 것 이상입니다. Retina 6K 디스플레이를 사용하면, <a class="text-blue-600 after:content-['_↗']" href="...">Pro Display XDR</a> 은 5K 디스플레이보다 약 40% 더 많은 화면 공간을 제공합니다.</p>속성 값 참조하기
attr() CSS 함수를 사용해 속성에 저장된 값을 참조하려면 content-[attr(<name>)] 구문을 사용합니다:
<p before="Hello World" class="before:content-[attr(before)] ..."> <!-- ... --></p>공백과 언더스코어 사용하기
HTML에서 공백은 클래스의 끝을 나타내기 때문에, 임의의 값에 공백이 포함된 경우 언더스코어로 대체해야 합니다:
<p class="before:content-['Hello_World'] ..."> <!-- ... --></p>실제 언더스코어를 포함해야 하는 경우, 백슬래시로 이스케이프 처리할 수 있습니다:
<p class="before:content-['Hello\_World']"> <!-- ... --></p>CSS 변수 사용하기
::before와 ::after 의사 엘리먼트의 내용을 CSS 변수로 제어하려면 content-(<custom-property>) 구문을 사용하세요:
<p class="content-(--my-content)"> <!-- ... --></p>이 구문은 content-[var(<custom-property>)]의 축약형으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a content 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<p class="before:content-['Mobile'] md:before:content-['Desktop'] ..."> <!-- ... --></p>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
이 코드는 반응형 디자인을 구현하기 위한 컴포넌트입니다. element 속성은 HTML 엘리먼트를 지정하고, property 속성은 스타일 속성을 정의합니다. defaultClass는 기본적으로 적용될 클래스를, featuredClass는 특정 조건에서 적용될 클래스를 설정합니다. 이 예제에서는 모바일 환경에서는 "Mobile"이라는 텍스트가, 데스크톱 환경에서는 "Desktop"이라는 텍스트가 표시됩니다.
