가상 요소

클래스 이름 앞에 콜론 2개(::)를 붙여서 표시한다.

문서 안의 특정 부분에 스타일 지정을 위하여

가상으로 요소를 만들어 추가한다.

 

① ::first-line과 ::first-letter

첫 번째 줄, 첫 번째 글자에 스타일 적용

② ::before과 ::after

내용의 앞뒤에 콘텐츠 추가

<style>
	.new::after {
            content:"NEW!!";
            font-size:x-small;
            padding:2px 10px;
            margin:0 10px;
            border-radius: 50%;
            background-color: red;
            color:white;
        }
        .letter::first-letter{
            color:skyblue;
        }
        .line::first-line {
            color:pink;
        }
</style>

<div class="container">
        <h1>제품 목록</h1>
        <ul>
            <li class="new letter">제품 A</li>
            <li class="line">제품 B</li>
            <li class="new letter">제품 C</li>
            <li>제품 D</li>
        </ul>
    </div>

가상 요소

 

 

 

 

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.