溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中after有什么用

發(fā)布時(shí)間：2020-12-04 11:28:45 來源：億速云 閱讀：239 作者：小新 欄目：web開發(fā)

小編給大家分享一下css中after有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

css after是CSS中的一種選擇器，該選擇器可用于在被選元素的內(nèi)容后面插入內(nèi)容，其語法如“p:after{ content:"";background-color:yellow;color:red;}”。

在CSS中，:after偽類的作用就是在指定的元素內(nèi)容（而不是元素本身）之后插入一個(gè)包含content屬性指定內(nèi)容的行內(nèi)元素。

最基本的用法如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
p:after {
content: "- 臺(tái)詞";
}
</style>
</head>
<body>
<p>我是唐老鴨。</p>
<p>我住在 Duckburg。</p>
</body>
</html>

after偽類的一些應(yīng)用

:after清除浮動(dòng)

浮動(dòng)布局導(dǎo)致高度坍塌影響到整體布局時(shí)元素需要清除浮動(dòng)，使用:after就是其中的一種方法：

.row:after {
width:0;
height:0;
content:'';
display: block;
clear: both;
}

偽類和偽元素

偽類選擇元素基于的是當(dāng)前元素處于的狀態(tài)，或者說元素當(dāng)前所具有的特性，而不是元素的id、class、屬性等靜態(tài)的標(biāo)志。由于狀態(tài)是動(dòng)態(tài)變化的，所以一個(gè)元素達(dá)到一個(gè)特定狀態(tài)時(shí)，它可能得到一個(gè)偽類的樣式；當(dāng)狀態(tài)改變時(shí)，它又會(huì)失去這個(gè)樣式。由此可以看出，它的功能和class有些類似，但它是基于文檔之外的抽象，所以叫偽類。

與偽類針對(duì)特殊狀態(tài)的元素不同的是，偽元素是對(duì)元素中的特定內(nèi)容進(jìn)行操作，它所操作的層次比偽類更深了一層，也因此它的動(dòng)態(tài)性比偽類要低得多。實(shí)際上，設(shè)計(jì)偽元素的目的就是去選取諸如元素內(nèi)容第一個(gè)字（母）、第一行，選取某些內(nèi)容前面或后面這種普通的選擇器無法完成的工作。它控制的內(nèi)容實(shí)際上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文檔中，所以叫偽元素。

以上是“css中after有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手