HTML / CSS - 11 (2021.03.17)

0316.css

0.01MB

0316.html

0.01MB

0317.css

0.00MB

0317.html

0.01MB

---

선택자::before{ 속성:속성값}

: 선택자(a)에 해당하는 내용이 나오기 전에(before) 해당 속성을 부여.

    <ul>
        <li>
            <a href="#"> 3월 블록체인반 모집 임박</a>

#subject7>ul>li>a::before{
    content: " - ";
}

 

<a href="#"> -  3월 블록체인반 모집 임박</a>

 

이렇게 그냥 html에 '-'를 넣어줘도 화면에는 똑같이 나오지만    

 앞에 붙은 ' - '를  다른 기호로 바꿔주고 싶을 때, 바로 위의 경우는 html에서 해당 영역에 대해 다 수정을 해줘야 한다.

 

하지만 a:before를 사용하면 content 속성 값만 수정하여 쉽게 변경할 수 있다.  

여러 줄의 html을 한 줄? 두줄? 의 css로 바꿀 수 있게 된다.

---