이 글에서는 텍스트 채우기, 아이콘 글꼴 역할, 진행 라인, 타임라인 및 기하학적 도형과 같이 CSS에서 :before 및 :after로 생성된 의사 요소의 여러 사용 시나리오를 주로 소개합니다.
1. 소개
1.1 설명
: CSS의 before 및 :after는 :befor에 의해 생성된 의사 요소가 선택한 요소의 첫 번째 하위 요소이고, :after에 의해 생성된 의사 요소입니다. 선택한 요소의 마지막 하위 요소입니다.
:before 및 :after에 의해 생성된 의사 요소의 기본 스타일은 인라인 스타일입니다.
1.2 구문
/* CSS3 */ selector::before /* CSS2 */ selector:before
CSS3에서는 의사 클래스(:1개의 콜론)와 의사 요소(::2개의 콜론)를 구별하기 위해 ::(콜론 2개)를 도입했습니다.
Pseudo-class: :hover, :first-child, :focus 등 요소 자체를 조작합니다.
의사 요소: ::before, ::after, ::content 등과 같은 요소의 하위 요소를 작동합니다.
IE8에서는 :(콜론)만 지원하므로 해당 브라우저와 호환되도록 :before 및 :after를 사용할 수도 있습니다.
1.3 콘텐츠 속성
content 속성은 의사 요소로 채워진 콘텐츠를 나타냅니다.
Example
CSS:
.test-p {
width: 100px;
height: 100px;
margin-left: 20px;
background-color: #eee;
}
.test-p::before {
content: "♥";
color: red;
}
.test-p::after {
content: "♥";
color: blue;
}HTML 페이지:
효과:
1.4 교체 가능한 요소
교체된 요소: 프레젠테이션이 CSS에 의해 제어되지 않습니다. 이러한 요소는 CSS와 독립적으로 모양이 렌더링되는 개체입니다.
일반적인 교체 가능한 요소에는