[css]_2(pseudo)
가상요소 선택자
:: 를 사용한다.
before after
a 요소의 내부앞에 가상의 content을 삽입한다.
<tag>(before)내용(after)</tag>
content에는 content: url(“주소”);도 가능하 다.
- ::before는 내용 앞에 있는 before에 content가 추가된다.
- ::after는 내용 뒤에 있는 after에 content가 추가된다.
<style>
.box-box>div::before {
content: "";
width: 30px;
height: 30px;
background: tomato;
margin-right: 20px;
display: inline-block;
border-radius: 20%;
div의 자식요소인 div를 선택한다.내용 앞에
content 가 추가된다.
여기서 무조건 content는 입력되어야 한다. 빈칸이라면
"" 을 입력한다.
}
</style>
<body>
<div class="box-box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
1
2
3