집 > 기사 > 웹 프론트엔드 > 의사 요소::before 및 ::after 사용에 대한 자세한 설명

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

php中世界最好的语言원래의: 2018-03-21 10:40:264439검색

이번에는 의사 요소::before 및 ::after 사용에 대한 자세한 설명을 가져왔습니다. 의사 요소::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 의사 요소를 사용하여 문제를 해결할 수 있습니다. classic clear float 문제 ：

.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에서의 효과는 다음과 같습니다.

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

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

rreee

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

네, 지금은 3시, 30시라면 어떨까요? 하나씩 추가하시겠습니까? (매우 어리석고 순진함...)

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

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

/*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>

효과는 다음과 같습니다.

이 cjk-ideographic 외에도 CSS에서 더 많은 list-style-type 속성을 사용할 수도 있습니다. (w3cshool에 테이블을 직접 붙여넣기)

믿거나 말거나 이 기사의 사례를 읽고 나면 방법을 익혔을 것입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!