가상 요소

특정 요소에 하나의 요소를 추가한다

 

1. ::first-line : 해당 가상 요소는 텍스트의 첫번째 줄에만 특정 스타일을 입혀준다. 문장의 첫 줄은 상위 요소의 크기나 브라우저의 크기에 따라 달라질 수 있다

    p::first-line {
        color: #ff0000;
        font-variant: small-caps;
    }

 

2. ::first-letter : 텍스트의 첫 문자에 특정 스타일을 입혀준다.

 

    p::first-letter {
        color: #ff0000;
        font-size: xx-large;

3. ::before / ::after

 

요소의 내용에 추가된다 보통 이미지나 글자, 그라데이션 등을 추가할때 사용한다

 

h1::before { content: 'hello'; } h1::after { content: url("images/marker-right.gif"); }