CSS3의 의사 요소::before 및 ::after 사용에 대한 자세한 설명

before와 after는 실제로 요소 전후에 첨부된 의사 요소입니다. 의사 요소라고 말하는 것은 해당 요소가 DOM에서 생성되지 않고 브라우저 렌더링 엔진이 CSS를 렌더링할 때 주로 그려진다는 것입니다. CSS3에서 의사 요소 ::before 및 ::after의 사용법을 소개하겠습니다. 필요한 친구는 이를 참조할 수 있습니다.

머리말

두 개의 의사 요소 ::before와 ::after가 실제로 CSS3의 내용이라는 것은 잘 알려져 있습니다. 그러나 실제로는 CSS2에 이미 있지만 CSS2에서는 Add 앞에 있습니다. (:before 및 :after)를 나타내는 콜론. 오늘은 이 두 가지 가상 요소를 활용하는 방법에 대해 주로 이야기하겠습니다.

1. 일반 요소처럼 스타일을 추가할 수 있습니다.

예를 들어 텍스트 앞에 아이콘을 추가하려는 경우 일반 요소로 작성하면 다음과 같이 작성할 수 있습니다.

/*CSS*/
.del{ font-size: 20px;}
.del i{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; 
        background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}

/*HTML*/
<p class="del"><i></i><span>删除</span></p>

하지만 빈 i 태그를 남겨두는 건 항상 불편하니 그냥 삭제하세요!

/*CSS*/
.del{ font-size: 20px;}
.del::before{ content: ""; display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; 
        background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}

/*HTML*/
<p class="del"><span>删除</span></p>

여기서는 빈 i 태그를 대체하기 위해 ::before 의사 요소를 직접 사용합니다. 두 가지 모두 동일한 효과를 갖습니다.

또한 이를 활용하여 다음을 사용할 수 있습니다. ::after 의사 요소를 사용하여 부동 소수점 지우기 문제:

.clearfix::after{ display:block;clear:both; content:""; 귀하의 웹사이트가 여전히 IE8과 호환되어야 한다면 :after를 사용하세요. ::after는 호환되지 않습니다.

2. 요소에 텍스트 삽입

때로는 여러 요소에 동일한 텍스트를 동시에 추가해야 할 수도 있으므로 이 두 개의 의사 요소 사용을 고려해 볼 수 있습니다. 예:

/*CSS*/
.up:after{ content: '↑'; color: #f00;}
.down:after{ content: '↓'; color: #0f0;}

/*HTML*/
<p class="up">上升</p>
<p class="down">下降</p>

효과는 다음과 같습니다.

셋째, 요소

에 이미지를 삽입하여 첫 번째 예와 유사한 그림과 텍스트 효과를 얻습니다. 이 기사에서는 다음과 같이 의사 요소를 사용하여 배경 이미지를 사용하지 않고 그림을 직접 삽입할 수도 있습니다.

/*CSS*/
.del{ font-size: 20px;}
.del::before{ content: url("imgs/delete.png"); display: inline-block; margin-right: 2px; vertical-align: middle; }
.del span{ vertical-align: middle;}

그러나 이런 방식으로 삽입된 그림은 다음과 같이 그림의 크기를 변경할 수 없다는 점에 유의하는 것이 중요합니다. 의사 요소의 크기를 제어하면 고정된 크기의 이미지만 가져올 수 있으므로(좀 까다롭습니다...) 개인적으로 정직하고 실용적인 배경 이미지를 사용하는 것이 더 좋다고 생각합니다.

4. 연속된 프로젝트 번호 삽입

연속된 프로젝트 번호를 추가하는 것이 쉽지 않겠죠? 주문한 목록을 직접 사용하세요!

예, 실제로 가능합니다. 다음과 같습니다.

<p>我的爱好：</p>
<ol>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ol>

Chrome에서의 효과는 다음과 같습니다.

좋아 보입니다. 문제 없습니다. 이전 일련 번호를 굵게 표시하려면 모직 천 ? 혼란스럽네요...

이제 각 텍스트 앞에 라벨과 숫자를 수동으로 추가한 다음 라벨에 스타일을 추가하면 안 되나요?

/*CSS*/
ul li{ list-style: none;}
ul li span{ font-weight: bold;}

/*HTML*/
<p>我的爱好：</p>
<ul>
    <li><span>1.</span>吃饭</li>
    <li><span>2.</span>睡觉</li>
    <li><span>3.</span>打豆豆</li>
</ul>

네, 지금은 3개, 30개면 어떨까요? 하나씩 추가하시겠습니까? (아주 어리석고 순진한...)

이때 순수 CSS를 사용한다면 의사 요소를 사용해야 합니다:

/*CSS*/
ul li{ list-style: none; counter-increment: number;}   //number相当于是个变量，随便取名就好，在伪元素中调用
ul li::before{ content: counter(number)"."; font-weight: bold;}  //注意这里不同于JS，counter(number)与"."之间不需要加任何东西，直接连接就好

/*HTML*/
<p>我的爱好：</p>
<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>

효과는 다음과 같습니다:

그러면 아라비아 숫자는 싫고, 그냥 중국 숫자를 쓰고 싶은데 괜찮나요?

그렇습니다! 의사 요소는 훌륭하고 강력합니다!

ul li{ list-style: none; counter-increment: number;}  
ul li::before{ content: counter(number,cjk-ideographic)"、"; font-weight: bold;}

효과는 다음과 같습니다:

이 cjk-ideographic 외에도 CSS에서 더 많은 목록 스타일 유형 속성을 사용할 수도 있습니다. (w3cshool에 테이블을 직접 붙여넣기)

위 내용은 CSS3의 의사 요소::before 및 ::after 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!