CSS 偽元素的一些罕見用例

作者：前端小智 2020-05-19 08:59:19

偽元素已經使用了很長時間。然而，我覺得有些用例并不是所有開發人員都完全了解的。我寫下這篇文章是為了闡明它們，以便它們能被更多地使用。

本文轉載自微信公眾號「大遷世界」，轉載本文請聯系大遷世界公眾號。

偽元素已經使用了很長時間。然而，我覺得有些用例并不是所有開發人員都完全了解的。我寫下這篇文章是為了闡明它們，以便它們能被更多地使用。

父子元素懸停特效

由于偽元素屬于其父元素，因此存在一些不尋常的用例。現在，讓我們看一個簡單的示例。

這個設計有一個 section title，在它的左邊有一個小圓圈。當我們將鼠標懸停在section title上時，圓圈會變大。

.section-title:before { 
    content: ""; 
    width: 20px; 
    height: 20px; 
    background: blue; 
    /* Other styles */ 
} 
 
.section-title:hover:before { 
    transform: scale(1.2); 
}

簡單明了，接著我們將此概念延伸到更有用的用例。

項目/博客組

在我的網站上，有一個部分需要列出了所有的項目名稱。我想為每個項目添加一個縮略圖，但這對我來說并不是最重要的事情。對我來說，更重要的是鏈接本身。不久前，我在[Ethan Marcotte][1]網站上首次看到了這種效果。

上面的設計模型展示了我想要應用的想法。段落中的每個彩色鏈接都有一個與之配對的偽元素。

「HTML」

<section class="hero"> 
    <p>Hello, my name is Ahmad. I’m a UX Designer and Front End Developer that enjoys the intersection between design and code. I write on <a href="www.ishadeed.com" class="link-1">ishadeed.com</a> and <a href="www.a11ymatters.com" class="link-2">a11ymatters.com</a> on CSS, UX Design and Web Accessibility.</p> 
</section>

1.向 hero 元素添加 padding

我想為偽元素保留空間，所以添加padding是一個解決方案。

2. 對偽元素進行絕對定位

為了絕對定位它們，我需要定義哪個父類是相對的父類。它應該被添加到hero中。

注意以下GIF中的位置：.hero部分中的position: relative是如何影響偽元素的。

3. 添加偽元素

最后一步是添加偽元素及其懸停效果：

.link-1 { 
  color: #854FBB; 
} 
 
@media (min-width: 700px) { 
  .link-1:after { 
    content: ""; 
    position: absolute; 
    right: 0; 
    top: 20px; 
    width: 150px; 
    height: 100px; 
    background: currentColor; 
    opacity: 0.85; 
    transition: 0.3s ease-out; 
  } 
 
  .link-1:hover { 
    text-decoration: underline; 
  } 
 
  .link-1:hover:after { 
    transform: scale(1.2); 
    opacity: 1; 
  } 
}

注意，我使用了currentColor作為偽元素背景色。如果你不知道這個關鍵字，它表示繼承其父元素的color值。所以在任何時候，我想要改變鏈接的顏色，只改變一次是很容易的。

事例源碼：https://codepen.io/shadeed/pen/66e9c2039b50463d96a2a9832f05ec0f

增加可點擊區域的大小

通過向鏈接添加一個偽元素，鏈接周圍的可點擊區域將變得更大。這是非常有用的，將增強用戶的體驗。我們舉個例子：

此外，它還可以用于擴展卡片組件的可點擊區域，該組件具有查看更多鏈接的功能。請注意，文章的內容(如標題和圖像)將位于偽元素之上，因此它不會影響文本的選擇或圖像的保存。

疊加層

假設有一個帶有背景圖像的元素，并且設計中有一個漸變疊加層，并且混合模式設置為color，偽元素可以幫到你。

.hero { 
  position: relative; 
  height: 300px; 
  background: url("image.jpg") center/cover; 
} 
 
.hero:after { 
  content: ""; 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  background-image: linear-gradient(180deg, #851717 0%, #30328C 100%); 
  mix-blend-mode: color; 
}

事例源碼：https://codepen.io/shadeed/pen/627c62e16dfa49021960cdc74ce459ba

包裹的陰影

過去，我曾經創建過一個在邊緣傾斜的陰影。它有一點微妙的效果。你猜怎么了!可以使用偽元素來實現它們。

1. 創建元素

使用以下常規樣式創建了一個div元素。

.elem { 
     position: relative; 
     display: flex; 
     align-items: center; 
     max-width: 400px; 
     background: #fff; 
     padding: 2rem 1rem; 
     font-size: 1.5rem; 
     margin: 2rem auto; 
     text-align: center; 
     box-sizing: border-box; 
}

2. 添加偽元素

然后，我為每個元素添加了:before和:after偽元素，其寬度為50%(為了更好的演示，我為每個元素添加了不同的背景)

.elem:before, 
.elem:after { 
    content: ""; 
    position: absolute; 
    top: 2px; 
    width: 50%; 
    height: 100%; 
} 
 
.elem:before { 
    left: 0; 
    background: grey; 
} 
 
.elem:after { 
    right: 0; 
    background: #000; 
}

接下來，添加transform: skew(x)，其中X為2度。對于其中之一，X應該為負數以實現所需的效果。

c4a1.png" target="_blank">c4a1.png" width="auto" border="0" height="auto" alt="" title="">

接下來，我將向每個偽元素添加z-index：-1，以將其移到其父元素的后面。

完成后，執行以下操作：

添加filter: blur
降低透明度
添加了從透明到黑色的漸變(以隱藏其父級頂部中心的偽元素邊緣)

3. 最后代碼

.elem { 
  position: relative; 
  display: flex; 
  align-items: center; 
  max-width: 400px; 
  background: #fff; 
  padding: 2rem 1rem; 
  font-size: 1.5rem; 
  margin: 2rem auto; 
  text-align: center; 
  box-sizing: border-box; 
} 
 
.elem:before, 
.elem:after { 
    content: ""; 
    position: absolute; 
    top: 3px; 
    width: 50%; 
    height: 100%; 
    z-index: -1; 
    background: linear-gradient(to bottom, transparent, #000); 
    filter: blur(3px); 
    opacity: 0.3; 
} 
 
.elem:before { 
    left: 0; 
    transform: skewY(-2deg); 
} 
 
.elem:after { 
    right: 0; 
    transform: skewY(2deg); 
}

還有另一種選擇，即在偽元素:before和:after之間交換skewY值。

事例源碼：https://codepen.io/shadeed/pen/be104604ada76a7fa854bffca1d6b806

:after VS :before

在最近的Twitter討論中，我了解到最好使用:before而不是:after。為什么?因為在使用:after時，可能需要我們向其他嵌套元素添加z-index，以便偽元素不會與它們重疊。我們舉一個真實的例子。

這是一張由縮略圖和標題組成的簡單卡片。注意到，在文本下方會有一個漸變疊加層，以使文本更清晰，以防縮略圖顏色太淺。

c4da7cfddea045b3b20947a448bab.png" target="_blank">c4da7cfddea045b3b20947a448bab.png" width="auto" border="0" height="auto" alt="" title="">

<article class="card"> 
  <img src="article.jpg" alt=""> 
  <h2>Title here</h2> 
</article>

要在文本下方添加漸變疊加層，我將需要使用偽元素。你會選擇哪一個?:before或:after?我們來研究看看。

1. after 元素

在這種情況下，標題將顯示在偽元素疊加圖的下方，如下所示：

解決方案是在卡片標題中添加z-index。即使這是一個簡單快速的解決方案，也不是正確的做法。

.card-title { 
    /*Other styles*/ 
    z-index: 1; 
}

2. before 元素

使用:before元素時，默認情況下可以使用!無需在卡片標題中添加z-index。原因是，使用:before時，該元素不會出現在其他同級項的上方，而當元素為:after時，它將出現在其他同級項之上。

事例源碼：https://codepen.io/shadeed/pen/0032e918818efe33b9016434a98bf6ff

基于文件擴展名的鏈接樣式

例如，如果有一個包含PDF文件的鏈接，則可以添加PDF圖標，以使其對用戶更清晰。

面是如何顯示鏈接的PDF圖標的示例

「HTML」

<p><a href="example.pdf">Download PDF</a></p> 
<p><a href="example.doc">Download Doc</a></p>

「CSS」

a[href$=".pdf"]:before { 
  content: ""; 
  display: inline-block; 
  vertical-align: middle; 
  margin-right: 8px; 
  width: 18px; 
  height: 18px; 
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/np_pdf_377198_000000.svg) center/20px no-repeat; 
  padding: 3px; 
}

事例源碼：https://codepen.io/shadeed/pen/24ecff4a6e9269d1ee526ec692151af4

分隔線

在此示例中，存在帶有“or”的分隔符。在每一側都有一條線。使用偽元素和 Flexbox 可以做到這一點。

「HTML」

<p>Or</p>

「CSS」

p { 
  display: flex; 
  align-items: center; 
} 
 
p:before, p:after { 
  content: ""; 
  height: 2px; 
  background: #c5c5c5; 
  flex-grow: 1; 
} 
 
p:before { 
  margin-right: 10px; 
} 
 
p:after { 
  margin-left: 10px; 
}

事例源碼：https://codepen.io/shadeed/pen/314cc43ddbd4ac384f02551d8907a323

責任編輯：趙寧寧來源：大遷世界

CSS 偽元素開發