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와 독립적으로 모양이 렌더링되는 개체입니다.

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

:before :after는 이러한 요소 내에서는 효과적이지 않습니다.

1.5 브라우저 지원

IE9 버전은 :before :after 만 완벽하게 지원하며, 이제 Chrome 및 Firefox도 완벽하게 지원됩니다.

IE Edge Firefox Chrome Android 
Chrome iOS 
Safari
9 all 2 all all  all

2. 애플리케이션 시나리오

2.1 텍스트 문자 지원

설명: 콘텐츠 속성은 텍스트 문자를 지원합니다.

예:

2.2는 iconfont를 지원합니다

참고: content 속성은 iconfont 글꼴 차트 표시도 지원합니다. 이는 가장 많이 사용되는 시나리오이기도 합니다.

예: 이 예는 Alibaba iconfont 아이콘 라이브러리를 참조했습니다

2.3 진행 라인 및 타임라인

설명: :before :after에 의해 생성된 의사 요소는 다음과 같이 요소 주변의 지정된 위치에 있는 라인에 배치될 수 있습니다. 진행 상황과 타임라인.

1) 진행 라인

2) 타임라인

2.4 기하학적 모양

설명: :before :after 의사 요소의 테두리 관련 속성을 설정하면 많은 기하학적 모양을 만들 수 있습니다. 삼각형, 다각형, 다섯개 별 등과 같은 생성;

1) Rectangle

참고: 기본적으로 :before :after 의사 요소의 테두리 속성은 다른 HTML 요소의 테두리 속성과 동일합니다.

CSS:

p::before {
    width: 0px;
    height: 0px;
    content: '';
    position: absolute;
    border-top: 50px solid #f50000;
    border-right: 50px solid #6cc361;
    border-bottom: 50px solid #6167c3;
    border-left: 50px solid #fa00d9;
}

효과:

2) Triangle

설명: 특정 방향의 테두리를 표시하고 왼쪽과 오른쪽의 테두리를 숨겨(배경은 투명으로 설정) 삼각형의 모양을 표시하는 의사 요소입니다. ㅋㅋㅋ CSS 의사 요소 클래스 및 의사 요소 이해하기

위 내용은 CSS에서 의사 요소 전후의 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!