CSS에서 의사 요소 전후의 사용

이 글에서는 텍스트 채우기, 아이콘 글꼴 역할, 진행 라인, 타임라인 및 기하학적 도형과 같이 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와 독립적으로 모양이 렌더링되는 개체입니다.

일반적인 교체 가능한 요소에는