CSS - 가상 요소 선택자(Pseudo-Elements Selectors)

가상 요소 선택자(Pseudo-Elements Selectors)

• '::’ 가 기호

 

BEFORE

• E 요소 내부의 앞에 내용(Content)을 삽입

• content 속성(property) 필수

ul li::before {
    content : “숫자”;
    Font-weight : bold;
}

<ul>
    <li>1</li>  =>  <li>숫자1</li>   
    <li>2</li>  =>  <li>숫자2</li>   
    <li>3</li>  =>  <li>숫자3</li>   
    <li>4</li>  =>  <li>숫자4</li>   
    <li>5</li>  =>  <li>숫자5</li>   
    <li>6</li>  =>  <li>숫자6</li>   
</ul>

 

 

AFTER

• E 요소 내부 뒤에 내용(Content)을 삽입

• content 속성(property) 필수

ul li::after {
    content : “.0”;
}

<ul>
    <li>1</li>  =>  <li>1.0</li>
    <li>2</li>  =>  <li>2.0</li>
    <li>3</li>  =>  <li>3.0</li>
    <li>4</li>  =>  <li>4.0</li>
    <li>5</li>  =>  <li>5.0</li>
    <li>6</li>  =>  <li>6.0</li>
</ul>

 

※ 추가사항

• 이미지 삽입 가능

 

 

출처 : heropy.org