CSS / content / 요소 앞 또는 뒤에 텍스트, 이미지 등 콘텐트 추가하기
content
content 속성은 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가한다. 예를 들어 p 요소 앞에 콘텐트를 넣으려면 다음과 같이 하고
p:before { content: xxx; }
뒤에 넣으려면 다음과 같이 한다.
p:after { content: xxx; }
텍스트 추가하기
p 요소 앞에 Hello World를 추가한다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { font-family: Consolas, monospace; font-size: 24px; } p:before { content: "Hello World"; } </style> </head> <body> <p>Lorem ipsum dolor</p> </body> </html>
추가한 텍스트는 CSS로 더 꾸밀 수 있다.
p:before { content: "Hello World"; margin-right: 20px; font-weight: bold; color: cornflowerblue; }
이미지 추가하기
p 요소 앞에 images 폴더 안에 있는 circle.png를 추가한다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { font-family: Consolas, monospace; font-size: 24px; } p:before { content: url( "images/circle.png" ); } </style> </head> <body> <p>Lorem ipsum dolor</p> </body> </html>
추가한 이미지는 CSS로 더 꾸밀 수 있다.
p:before { content: url( "images/circle.png" ); vertical-align: middle; margin-right: 30px; }
content 속성으로 추가한 이미지는 크기를 정할 수 없다. 크기를 조절하고 싶다면 background 속성을 이용한다.
p:before { content: ""; display: inline-block; background-image: url( "images/circle.png" ); background-size: 40px 40px; width: 40px; height: 40px; vertical-align: middle; margin-right: 20px; }
속성값 추가하기
선택한 요소의 속성값을 출력할 수도 있다. 예를 들어 p 요소의 class 값을 나타내려면 다음과 같이 한다.
p:before { content: attr( class ); }