코드를 실행하면 p 태그의 콘텐츠 앞과 뒤에 마치 어떤 요소가 있는 것처럼 선택하고 여기에 content 속성으로 새로운 텍스트를 추가합니다. 그래서 p 태그의 Lorem 앞에는 <before>가, dolor. 뒤에는 <after>가 추가됐습니다.
Note content 속성의 응용
content 속성은 CSS 속성으로 새로운 콘텐츠를 생성할 때 사용합니다. content 속성으로 추가된 콘텐츠는 실제로 HTML 문서에 작성한 콘텐츠처럼 다른 CSS 속성과 함께 활용할 수 있습니다. 예를 들어, 다음 코드처럼 텍스트 색상을 바꿔 주는 color 속성과 함께 사용하면 새로 추가된 콘텐츠의 텍스트 색상은 빨간색이 됩니다.
p::before{
content:'<before>';
color:red;
}