의사 요소::before 및 ::after 사용 튜토리얼

::before 및 ::after는 실제로 CSS3의 내용인 두 개의 의사 요소입니다. 그러나 CSS2에는 이미 있지만 CSS2에서는 앞에 콜론(: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*/
<div class="del"><i></i><span>删除</span></div>

하지만 항상 빈 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*/
<div class="del"><span>删除</span></div>

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

이 동일한 점을 사용하여 ::after 의사 요소를 사용하여 문제를 해결할 수 있습니다. 부동소수점 지우기의 전형적인 문제:

.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; height:0; }

물론 웹사이트가 여전히 IE8과 호환되어야 한다면 :after를 사용하세요. ::after는 호환되지 않습니다.

2. 요소에 텍스트 삽입

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

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

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

효과는 다음과 같습니다:

3. 요소에 이미지 삽입

이 문서의 첫 번째 예와 유사한 그림과 텍스트 효과를 얻을 수도 있습니다. 그림을 직접 삽입할 수도 있습니다. 배경을 사용하지 않은 그림:

/*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에서 더 많은 목록 스타일 유형 속성을 사용할 수도 있습니다. (w3chool에 테이블을 직접 붙여넣기)

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