核心要點

• CSS偽元素是頁面上并非HTML代碼中存在的元素，它們可以使用任何應用于其他元素的CSS樣式進行操作。
• CSS中的:before和:after偽元素可用于生成頁面內(nèi)容，包括文本、圖像、屬性值和計數(shù)器。它們還可用于創(chuàng)建具有最少標記的復雜形狀。
• CSS中的各種偽元素包括:first-line、:first-letter、:selection、:before和:after。這些可用于設置元素特定部分的樣式，在元素內(nèi)容前后插入內(nèi)容，以及設置塊級元素的首字母或首行樣式等等。

視頻講解 (加載播放器中……) 本視頻是AtoZ CSS系列的一部分。您可以在此處找到該系列的其他內(nèi)容。

文字記錄

CSS偽元素是頁面上不在HTML代碼中出現(xiàn)的元素。

它們可以使用應用于任何其他元素的任何CSS樣式進行操作。

兩個特殊的偽元素——:before和:after——可用于從CSS生成頁面內(nèi)容，并具有許多潛在的用例。

在本節(jié)中，我們將學習：

• 五種不同的偽元素
• 從CSS生成文本、圖像屬性值和計數(shù)器等內(nèi)容
• 如何使用最少的標記創(chuàng)建復雜的形狀

偽元素

CSS中有五個偽元素：

• :first-line
• :first-letter
• :selection
• :before
• :after

這些與偽類通過雙冒號區(qū)分，但為了簡潔起見，通常在CSS中使用單冒號編寫。

這里有一段很長的占位符文本塊引用。我可以使用:first-line更改文本首行的顏色，即使文本重新調(diào)整格式后也適用。我可以通過使用浮動和更大的字體大小設置:first-letter的樣式來創(chuàng)建一個首字母大寫效果。我還可以使用:selection更改所選文本的顏色。

我可以使用:before和:after偽元素在塊引用前后添加大引號。文本從content屬性生成，然后可以使用CSS樣式來獲得所需的效果。

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

生成內(nèi)容

使用:before和:after偽元素允許我們向頁面添加各種不同的內(nèi)容。

我們已經(jīng)看到如何向頁面添加文本內(nèi)容，但我們也可以添加圖像、屬性值、計數(shù)器或空字符串，只需訪問這兩個額外的元素即可。

添加圖像類似于使用url()添加背景圖像。在這里，使用url()作為content屬性的值。我實際上更喜歡使用背景圖像，并通過為content創(chuàng)建空字符串來訪問偽元素。這提供了對圖像的更多控制，因為所有常用的屬性（如background-position、background-repeat和background-size）都可用。

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

也可以使用content屬性將HTML屬性的值注入頁面。在創(chuàng)建打印樣式表時，我喜歡添加以下代碼片段以輸出鏈接的URL，以便可以從頁面讀取它們：

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

這將為任何不是內(nèi)部鏈接或哈希鏈接的鏈接在鏈接文本后添加鏈接。

生成內(nèi)容的最后一個特例是插入計數(shù)器變量的值。我過去發(fā)現(xiàn)這對于對復雜的法律條款和條件列表進行編號非常有用。

這里有一系列標題，下面有一系列嵌套列表。我希望每個章節(jié)標題都有一個編號，每個列表項都作為每個章節(jié)的子項編號。

對于每個h2，我將遞增一個“section”計數(shù)器；對于每個列表項，我將遞增一個“item”計數(shù)器。在每個章節(jié)標題之前，我將輸出章節(jié)計數(shù)器的值；在每個列表項之前，我將輸出項目計數(shù)器的值?？梢栽谟嫈?shù)器之間添加額外的字符串以創(chuàng)建復雜的編號系統(tǒng)。此方法的簡化形式可用于控制列表中數(shù)字或項目符號的樣式。

a[href]:not([href*="#"]):after {
  content: attr(href);
}

形狀

由于頁面上的每個元素都可以有兩個“額外”元素，并且可以根據(jù)我們的喜好設置樣式，因此可以創(chuàng)建各種復雜的形狀。

在思考演示示例時，我看到了CSS-Tricks上形狀的參考；其中一個非常突出，我將逐步介紹其工作原理。讓我們用單個元素制作陰陽符號。

h2 {counter-increment: section;}
ul {counter-reset: item;}
li {counter-increment: item;}

h2:before {
  content: counter(section) " - ";
}
li:before {
  content: counter(section) "." counter(item);
}

從方框開始，可以使用border-radius將其轉(zhuǎn)換為圓形?？梢允褂玫扔趫A形高度的border-bottom創(chuàng)建兩個彩色半圓形。兩個點是通過創(chuàng)建兩個帶有偽元素的圓圈并使用position:absolute放置它們來創(chuàng)建的。使用與半圓顏色匹配的邊框，可以創(chuàng)建符號的兩個圓形端點。如果您問我，這很酷。

我很喜歡使用偽元素；您可以用它們做很多事情，并向頁面添加各種視覺效果，而不會使標記混亂。

關(guān)于CSS偽元素的常見問題

CSS偽元素有哪些不同類型？

CSS偽元素用于設置元素特定部分的樣式。有幾種類型的偽元素，包括::before、::after、::first-letter、::first-line、::selection、::backdrop和::placeholder。每個偽元素都針對元素的不同部分。例如，::before和::after用于在元素內(nèi)容前后插入內(nèi)容，而::first-letter和::first-line用于設置塊級元素的首字母或首行的樣式。

如何使用::before和::after偽元素？

::before和::after偽元素用于在元素內(nèi)容前后插入內(nèi)容。它們通常用于裝飾目的，例如添加圖標或引號。要使用這些偽元素，需要指定content屬性。例如，要在段落前面添加心形圖標，可以使用以下代碼：

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

我可以使用偽元素設置表單輸入的樣式嗎？

是的，您可以使用偽元素設置表單輸入的樣式。但是，并非所有表單輸入都可以使用偽元素設置樣式。例如，::placeholder偽元素可用于設置輸入字段的占位符文本樣式。這是一個示例：

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

如何使用偽元素設置段落首字母的樣式？

您可以使用::first-letter偽元素設置塊級元素首字母的樣式。這通常用于創(chuàng)建首字母大寫效果。這是一個示例：

a[href]:not([href*="#"]):after {
  content: attr(href);
}

我可以在同一個元素上使用多個偽元素嗎？

是的，您可以在同一個元素上使用多個偽元素。例如，您可以在同一個元素上同時使用::before和::after來在其內(nèi)容前后插入內(nèi)容。但是，請記住偽元素的順序很重要。::before偽元素將始終插入在::after偽元素之前。

所有瀏覽器都支持偽元素嗎？

大多數(shù)現(xiàn)代瀏覽器都支持偽元素。但是，某些瀏覽器的舊版本可能不支持所有偽元素。在使用偽元素之前，最好檢查一下瀏覽器的兼容性。

偽元素和偽類有什么區(qū)別？

偽元素和偽類都用于根據(jù)某些條件為元素應用樣式。但是，它們用于不同的目的。偽類用于在元素處于特定狀態(tài)時設置其樣式，例如當鼠標懸停在其上或獲得焦點時。另一方面，偽元素用于設置元素特定部分的樣式。

我可以將偽元素與JavaScript一起使用嗎？

偽元素不是DOM的一部分，因此無法使用JavaScript直接訪問或操作它們。但是，您可以通過使用JavaScript更改父元素的樣式來更改應用于偽元素的樣式。

如何使用::selection偽元素？

::selection偽元素用于更改用戶所選文本的外觀。例如，您可以更改所選文本的背景顏色和文本顏色。這是一個示例：

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

我可以為偽元素設置動畫嗎？

是的，您可以使用CSS動畫或過渡為偽元素設置動畫。但是，請記住并非所有屬性都可以設置動畫。例如，您可以為偽元素的不透明度或變換設置動畫，但不能為content屬性設置動畫。

以上是ATOZ CSS屏幕截圖：CSS偽元素的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！