7 ::之前的實際用途和:: CSS中的偽元素之後

CSS 的::before和::after偽元素允許您在任何非替換元素（例如，它們適用於<div>但不適用於<code><img alt="7 ::之前的實際用途和:: CSS中的偽元素之後" >）之前和之後插入“內容”。這實際上允許您在網頁上顯示HTML 內容中可能不存在的內容。您不應該將其用於實際內容，因為它在可訪問性方面不太好，因為您甚至無法選擇和復制以這種方式插入頁面上的文本——它只是裝飾性內容。在本文中，我將引導您完成七個不同的示例，這些示例展示瞭如何使用::before和::after創建有趣的效果。

目錄

• 樣式損壞的圖像
• 自定義塊引用
• 圖標項目符號列表
• 動畫切換開關
• 漸變邊框
• 漸變疊加
• 自定義單選按鈕
• 總結

請注意，對於大多數示例，我只解釋與CSS 偽元素特別相關的代碼部分。也就是說，如果您想查看其他樣式的代碼，所有CSS 都包含在嵌入式演示中。

樣式損壞的圖像

當用戶訪問您的網站時，他們的互聯網連接（或超出您控制範圍的因素）可能會阻止您的圖像下載，因此瀏覽器會顯示損壞的圖像圖標和圖像的替代文本（如果確實存在）。

如何改用自定義佔位符？您可以使用::before和::after以及一些CSS 定位來實現這一點。

首先，我們需要在圖像元素上使用相對定位。我們稍後將在其中一個偽元素上使用絕對定位，因此這種相對位置確保偽元素位於圖像元素的內容內，而不是完全脫離文檔流。

 img {
  display: block; /*避免由行高引起的圖像下方的空間*/
  position: relative;
  width: 100%;
}

接下來，讓我們使用圖像的::before偽元素創建損壞圖像效果的區域。我們首先將使用淺灰色背景和稍暗的邊框對其進行樣式設置。

 img::before {
  background-color: hsl(0, 0%, 93.3%);
  border: 1px dashed hsl(0, 0%, 66.7%);
  /* ... */
}

<img alt="7 ::之前的實際用途和:: CSS中的偽元素之後" >是一個替換元素。為什麼要在其上使用::before偽元素？它不起作用！正確。在這種情況下，當圖像無法加載時，偽元素將顯示在Chrome 和Firefox 中，這正是您想要的。同時，Safari 只顯示應用於替代文本的樣式。

樣式應用於損壞圖像的左上角。

到目前為止，一切順利。現在我們可以將其設置為塊級元素（ display: block block ）並賦予其填充整個可用空間的高度。

 img::before {
  /* ... */
  display: block;
  height: 100%;
}

我們可以進一步完善樣式。例如，讓我們圓角。我們還應該通過為偽元素提供全寬和絕對定位來為替代文本留出一些空間，以便更好地控制將內容放置在我們想要的位置。

 img::before {
  /* ... */
  border-radius: 4px;
  content: "";
  position: absolute;
  width: 100%;
}

如果您在此處停止並檢查您的工作，您可能會撓頭，因為替代文本突然消失了。

這是因為我們將content設置為空字符串（我們需要顯示我們生成的內容和样式）並覆蓋整個空間，包括實際的替代文本。它在那裡，我們只是看不到它。

我們可以通過替代（明白了嗎？）方式顯示替代文本，這次借助::after偽元素。 content屬性實際上能夠使用attr()函數顯示圖像的alt屬性文本：

 img::after {
  content: attr(alt);

  /*一些簡單的樣式*/
  font-weight: bold;
  position: absolute;
  height: 100%;
  left: 0px;
  text-align: center;
  top: 1px;
  width: 100%;
}

這太棒了！至少在Chrome 中是這樣。

但是，在Firefox 中，情況並非如此。

一個快速的解決方法是使用屬性選擇器（在本例中為img[alt] ）直接定位alt屬性，並在那裡定位類似的樣式，以便與Chrome 匹配。

 img[alt] {
  text-align: center;
  font-weight: bold;
  color: hsl(0, 0%, 60%);
}

現在我們有一個在Chrome 和Firefox 中一致的優秀佔位符。

自定義塊引用

塊引用是引文或引自作品的摘錄。它們也提供了一個非常好的機會，可以用視覺上有趣的內容來打破一堵文本牆。

有各種各樣的方法可以設置塊引用的樣式。 Chris 有一套五種樣式，可以追溯到2007 年。

我想看看另一種技術，一種結合了::before和::after的技術。就像我們在上一個示例中看到的那樣，我們可以使用content屬性來顯示生成的內容，並應用其他屬性來裝飾它。讓我們在塊引用的開頭和結尾加上大引號。

HTML 很簡單：

<blockquote>

</blockquote>

CSS 中的一些裝飾：

 blockquote {
  font-style: italic;
  line-height: 1.618;
  font-size: 1.2em;
  width: 30em;
  position: relative;
  padding: 40px 80px;
}

請注意其中的position: relative ，因為正如您將了解到的那樣，它對於定位塊引用至關重要。

正如您可能猜到的那樣，我們將使用::before用於第一個引號，使用::after用於結束引號。現在，我們可以簡單地在兩者上調用content屬性並在其中生成標記。但是，CSS 為我們提供了open-quote和close-quote值。

 blockquote::before {
  content: open-quote;
  /*將其放置在左上角*/
  top: 0;
  left: 0;
}

blockquote::after {
  content: close-quote;
  /*將其放置在右下角*/
  bottom: 0;
  right: 0;
}

這為我們提供了我們想要的引號，但我允許我稍微整理一下樣式：

 blockquote::before,
blockquote::after {
  background-color: #cccccc;
  display: block;
  width: 60px;
  height: 60px;
  line-height: 1.618;
  font-size: 3em;
  border-radius: 100%;
  text-align: center;
  position: absolute;
}

圖標項目符號列表

我們在HTML 中有有序（<ol></ol> ）和無序（<ul></ul> ）列表。兩者都有瀏覽器用戶代理樣式表決定的默認樣式。但是，使用::before偽元素，我們可以用我們自己的內容覆蓋這些“默認”樣式。你猜怎麼著？我們可以在content屬性上使用表情符號（?）！

 .name-list li::before {
  content: "?";
  margin-right: 15px;
  font-size: 20px;
}

雖然這很好，但值得注意的是，我們實際上可以使用::marker偽元素，該元素專門用於設置列表標記的樣式。 Eric Meyer 向我們展示了它的工作原理，從長遠來看，這可能是一種更好的方法。

動畫切換開關

為表單設置樣式最巧妙的技巧之一是使用標準HTML 複選框創建切換開關。事實上，Preethi Sam 最近在展示一些其他使用CSS 蒙版的複選框樣式技巧時，分享了一種方法。

顧名思義，切換開關用於切換或切換複選框元素的選中和未選中狀態。

<label>
  <input type="checkbox">
</label>

所有自定義都是由於通過::before和::after偽元素添加到<label></label>元素的修改。但首先，這裡有一些<label></label>元素的基本CSS：

 .container {
  background: #212221;
  background: linear-gradient(to right, #1560bd, #e90);
  border-radius: 50px;
  height: 40px;
  position: relative;
  width: 75px;    
}

我們將“隱藏”複選框的默認外觀，同時使其占據全部空間。奇怪吧？它是不可見的，但技術上仍然存在。我們通過以下方式做到這一點：

• 將其位置更改為絕對位置，
• 將外觀設置為無，以及
• 將其寬度和高度設置為100%。

 input {
  -webkit-appearance: none; /* Safari */
  cursor: pointer; /*顯示它是一個交互式元素*/
  height: 100%;
  position: absolute;
  width: 100%;
}

現在，讓我們使用其::before偽元素設置<input>元素的樣式。此樣式將更改輸入的外觀，使我們更接近最終結果。

 input::before {
  background: #fff;
  border-radius: 50px;
  content: "";
  height: 70%;
  position: absolute;
  top: 50%;
  transform: translate(7px, -50%); /*將樣式移動到元素的中心*/
  width: 85%;
}

什麼，等等？您可能會認為::before不適用於替換元素，例如<input>。這是正確的，但僅當輸入類型為圖像時，這等效於<img alt="7 ::之前的實際用途和:: CSS中的偽元素之後" >元素。其他表單控件（如復選框）在HTML 規範中定義為非替換元素。

接下來，我們需要創建“切換”按鈕，碰巧我們仍然可以使用::after偽元素來創建它。但是，有兩點值得一提：

1. 背景是線性漸變。
2. “切換”按鈕使用transform屬性移動到<input>的中心。

 input::after {
  background: linear-gradient(to right, orange, #8e2de2);
  border-radius: 50px;
  content: "";
  height: 25px;
  opacity: 0.6;
  position: absolute;
  top: 50%;
  transform: translate(7px, -50%);
  transition: all .4s;
  width: 25px;
}

嘗試單擊切換按鈕。什麼也沒有發生。這是因為我們實際上並沒有更改<input>的選中狀態。即使我們更改了，結果也是……令人不快。

解決方法是將:checked屬性應用於<input>的::after偽元素。通過專門定位複選框的選中狀態並將其鏈接到::after偽元素，我們可以將切換按鈕移回原位。

 input:checked::after {
  opacity: 1;
  transform: translate(170%, -50%);
}

漸變邊框

我們可以用邊框裝飾圖像，使它們脫穎而出或更無縫地融入設計中。您知道我們可以在邊框上使用漸變嗎？好吧，我們可以使用::before （當然還有其他方法）。

核心思想是在圖像上創建一個漸變，並使用CSS z-index屬性和負值。負值在堆疊順序中將漸變拉到圖像下方。這意味著只要漸變具有負z-index ，圖像始終顯示在頂部。

 .gradient-border::before {
  /*呈現樣式*/
  content: "";
  /*填充整個空間*/
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /*創建漸變*/
  background-image: linear-gradient(#1a1a1a, #1560bd);
  /*將漸變堆疊在圖像後面*/
  z-index: -1;
}

figure {
  /*刪除默認邊距*/
  margin: 0;
  /*擠壓圖像，顯示其後面的漸變*/
  padding: 10px;
}

漸變疊加

這與我們在上一個示例中所做的類似，但是在這裡，我們正在圖像頂部應用漸變。我們為什麼要這樣做？它可以是一種很好的方法，可以為圖像添加一些紋理和深度。或者，如果頂部有需要額外對比度才能提高可讀性的文本，它可以用來使圖像變亮或變暗。

雖然這與我們剛才所做的類似，但您會注意到一些明顯的區別：

 figure::before {
  background-image: linear-gradient(to top right, #1a1a1a, transparent);
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}

看到了嗎？沒有z-index ，因為漸變堆疊在圖像頂部是可以的。我們還在背景漸變中引入了透明度，這允許圖像透過漸變顯示。你知道的，就像疊加一樣。

自定義單選按鈕

大多數（如果不是全部）我們都嘗試自定義HTML 單選按鈕的默認樣式，這通常是通過::before和::after完成的，就像我們之前對複選框所做的那樣。

我們首先設置一些基本樣式，只是為了做好準備：

 /*居中所有內容*/
.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}

/*表單元素的樣式*/
.form {
  background: #ccc;
  height: 100vh;
  width: 100%;
}

/*輸入的樣式*/
.form-row {
  background: #fff;
  border-radius: 50px;
  height: 40px;
  margin: 10px;
  overflow: hidden;
  position: relative;
  width: 150px;
}

現在讓我們使用appearance: none;刪除單選按鈕的默認樣式：

 .form-input {
  -webkit-appearance: none; /* Safari */
  appearance: none;
}

::before應位於單選按鈕的左上角，選中時，我們將更改其背景顏色。

 .form-input::before {
  /*呈現樣式*/
  content: '';
  /*顯示它是交互式的*/
  cursor: pointer;
  /*將其定位到輸入的左上角*/
  position: absolute;
  top: 0;
  left: 0;
  /*佔據整個空間*/
  height: 100%;
  width: 100%;
}

/*當輸入處於選中狀態時...*/
.form-input:checked::before {
  /*更改背景顏色*/
  background: #21209c;
}

我們仍然需要使用::after來解決一些問題。具體來說，當單選按鈕被選中時，我們希望將圓形環的顏色更改為白色，因為在其當前狀態下，圓環是藍色的。

 .form-input::after {
  /*呈現樣式*/
  content: '';
  /*顯示它是交互式的*/
  cursor: pointer;
  /*一些邊框樣式*/
  border-radius: 50px;
  border: 4px solid #21209c;
  /*定位環*/
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translate(0, -50%);
  /*設置尺寸*/
  height: 15px;
  width: 15px;
}

/*當輸入處於選中狀態時...*/
.form-input:checked::after {
  /*將::after的邊框更改為白色*/
  border: 4px solid #ffffff;
}

表單標籤在這裡仍然不可用。我們需要直接定位表單標籤以添加顏色，當表單輸入被選中時，我們將顏色更改為可見的顏色。

 .form-label {
  color: #21209c;
  font-size: 1.1rem;
  margin-left: 10px;
}

單擊按鈕，仍然沒有任何反應。這是怎麼回事。 ::before和::after上的position: absolute在單選按鈕被選中時會遮蓋內容，因為HTML 文檔層次結構中發生的任何內容都會被遮蓋，除非它們被移動到HTML 文檔中的新位置，或者它們的位置使用CSS 進行了更改。因此，每次選中單選按鈕時，其標籤都會被覆蓋。

您可能已經知道如何解決這個問題，因為我們之前在另一個示例中解決了類似的問題？我們將z-index: 1 （或position: absolute ）應用於表單標籤。

 .form-label {
  color: #21209c;
  font-size: 1.1rem;
  margin-left: 10px;
  z-index: 1; /*確保標籤堆疊在頂部*/
  /* position: absolute; 這是一個替代選項*/
}

總結

我們介紹了七種不同的方法，可以使用::before和::after偽元素來創建有趣的效果，自定義默認樣式，製作有用的佔位符以及為圖像添加邊框。

我們絕非涵蓋了利用這些可以使用CSS 選擇的其他元素時可以解鎖的所有可能性。然而，Lynn Fisher 已將其作為一項愛好，使用單個元素製作出令人驚嘆的設計。而且我們不要忘記Diana Smith 的CSS 藝術，它在多個地方使用偽元素來獲得逼真的繪畫效果。