공부하자
before 선택자. 엘리먼트의 스타일이 적용되기 전에 본문
before 선택자 : after 선택자와 반대되는 개념. 엘리먼트의 스타일이 적용되기 전에 스타일 추가.
www.w3schools.com/cssref/sel_before.asp
CSS ::before Selector
CSS ::before Selector Example Insert some text before the content of each
element: p::before { content: "Read this: "; } Try it Yourself » More "Try it Yourself" examples below. Definition and Usage The ::before selector inserts something before th
www.w3schools.com
사용법 : 엘리먼트:before
자주 사용되는 예시 :
.section.box ul li:before{content:'';display:inline-block;vertical-align:middle;} /* bullet 요소 넣을 때 자주 사용 */
content:''; → ' * ' 와 같이 특수문자, 반복문자 혹은 빈 값 등 값을 지정.
선택자 사용시 css에 반드시 content:''; 속성을 포함하여야 한다.
새로 생성되는 가상 요소의 속성을 지정해주는 것인데 빈 값으로도 지정이 가능하므로 반드시 작성.
추가하지 않을 경우 적용이 안된다.
'CSS정리' 카테고리의 다른 글
| 좌우배치를 하는 다양한 방법 (float, display:table, flex) (0) | 2021.01.04 |
|---|---|
| 여러가지 단위 : %, vw, vh, em, calc (0) | 2020.12.04 |
| 인접 형제 선택자 (0) | 2020.12.03 |
| (first, last, nth)-child : 순서 선택자 (0) | 2020.12.03 |
| after 선택자. 엘리먼트에 포함된 모든 스타일이 끝났을 때 (0) | 2020.11.30 |
Comments