가상 요소 선택자(Pseudo-Elements Selector) - before, after

주의!! 무조건 CSS에 content라는 요소가 있어야한다! content요소가 없으면 아무런 스타일이 적용되지 않는다.

가상클래스와 구분하기 위해 "::" 콜론을 두번사용해야한다.

 

 

1. before

html 작성한 태그 앞에 CSS스타일을 입히는 것이다.

ul li::before{
    content : "숫자"; /*이부분은 작성하지 않으면 아애 안나온다*/
    font-weight : bold;
    color : red;
    margin-right : 20px;
}

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
</ul>

html태그 이전 스타일링

 

 

 

2. after

html태그 뒤에 CSS스타일을 사용하는 것이다.

ul li::after{
    content : "숫자"; /*이부분은 작성하지 않으면 아애 안나온다*/
    font-weight : bold;
    color : red;
    margin-left : 20px;
}