ATOZ CSS屏幕截圖：CSS偽元素-css教學-PHP中文網

AtoZ CSS Screencast: CSS Pseudo Elements

核心要點

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

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

文字記錄

CSS偽元素是頁面上不在HTML代碼中出現的元素。

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

兩個特殊的偽元素——:before和:after——可用於從CSS生成頁面內容，並具有許多潛在的用例。

在本節中，我們將學習：

五種不同的偽元素
從CSS生成文本、圖像屬性值和計數器等內容
如何使用最少的標記創建複雜的形狀

偽元素

CSS中有五個偽元素：

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

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

這裡有一段很長的佔位符文本塊引用。我可以使用:first-line更改文本首行的顏色，即使文本重新調整格式後也適用。我可以通過使用浮動和更大的字體大小設置:first-letter的樣式來創建一個首字母大寫效果。我還可以使用: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;
}

登入後複製

生成內容

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

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

添加圖像類似於使用url()添加背景圖像。在這裡，使用url()作為content屬性的值。我實際上更喜歡使用背景圖像，並通過為content創建空字符串來訪問偽元素。這提供了對圖像的更多控制，因為所有常用的屬性（如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屬性的值注入頁面。在創建打印樣式表時，我喜歡添加以下代碼片段以輸出鏈接的URL，以便可以從頁面讀取它們：

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

登入後複製

這將為任何不是內部鏈接或哈希鏈接的鏈接在鏈接文本後添加鏈接。

生成內容的最後一個特例是插入計數器變量的值。我過去發現這對於對複雜的法律條款和條件列表進行編號非常有用。

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

對於每個h2，我將遞增一個“section”計數器；對於每個列表項，我將遞增一個“item”計數器。在每個章節標題之前，我將輸出章節計數器的值；在每個列表項之前，我將輸出項目計數器的值。可以在計數器之間添加額外的字符串以創建複雜的編號系統。此方法的簡化形式可用於控制列表中數字或項目符號的樣式。

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

登入後複製

形狀

由於頁面上的每個元素都可以有兩個“額外”元素，並且可以根據我們的喜好設置樣式，因此可以創建各種複雜的形狀。

在思考演示示例時，我看到了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將其轉換為圓形。可以使用等於圓形高度的border-bottom創建兩個彩色半圓形。兩個點是通過創建兩個帶有偽元素的圓圈並使用position:absolute放置它們來創建的。使用與半圓顏色匹配的邊框，可以創建符號的兩個圓形端點。如果您問我，這很酷。

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

關於CSS偽元素的常見問題

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

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

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

::before和::after偽元素用於在元素內容前後插入內容。它們通常用於裝飾目的，例如添加圖標或引號。要使用這些偽元素，需要指定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偽元素設置塊級元素首字母的樣式。這通常用於創建首字母大寫效果。這是一個示例：

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

登入後複製

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

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

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

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

偽元素和偽類有什麼區別？

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

我可以將偽元素與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;
}

登入後複製