의사 요소::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*/ 
删除

하지만 항상 빈 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*/ 
删除

여기서는 빈 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*/ 
上升
 
下降

효과는 다음과 같습니다:

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. 연속된 프로젝트 번호 삽입

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

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

我的爱好：
吃饭
睡觉
打豆豆

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

좋아 보입니다. 문제 없습니다. 이전 일련 번호를 굵게 표시하려면 어떻게 해야 합니까? 혼란스럽네요...

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

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

/*HTML*/
我的爱好：
1.吃饭
2.睡觉
3.打豆豆

네, 지금은 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*/
我的爱好：
吃饭
睡觉
打豆豆

효과는 다음과 같습니다:

그럼 아라비아 숫자를 원하지 않으면 , 사용하고 싶습니다. 중국어 숫자를 사용할 수 있나요?

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

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

효과는 다음과 같습니다.

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

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