CSS 僞元素的一些罕見用例

做者：ahman
譯者：前端小智
來源：css-tricks

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

僞元素已經使用了很長時間。然而，我以爲有些用例並非全部開發人員都徹底瞭解的。我寫下這篇文章是爲了闡明它們，以便它們能被更多地使用。

父子元素懸停特效

因爲僞元素屬於其父元素，所以存在一些不尋常的用例。 如今，讓咱們看一個簡單的示例。

這個設計有一個 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網站上首次看到了這種效果。

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

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/pe...

增長可點擊區域的大小

經過向連接添加一個僞元素，連接周圍的可點擊區域將變得更大。這是很是有用的，將加強用戶的體驗。咱們舉個例子：

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

疊加層

假設有一個帶有背景圖像的元素，而且設計中有一個漸變疊加層，而且混合模式設置爲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/pe...

包裹的陰影

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

建立元素

使用如下常規樣式建立了一個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;
}

添加僞元素

而後，我爲每一個元素添加了: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應該爲負數以實現所需的效果。

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

完成後，執行如下操做：

• 添加filter: blur
• 下降透明度
• 添加了從透明到黑色的漸變（以隱藏其父級頂部中心的僞元素邊緣）

最後代碼

.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/pe...

:after VS :before

在最近的Twitter討論中，我瞭解到最好使用:before而不是:after。 爲何？ 由於在使用:after時，可能須要咱們向其餘嵌套元素添加z-index，以便僞元素不會與它們重疊。 咱們舉一個真實的例子。

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

<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/pe...

基於文件擴展名的連接樣式

例如，若是有一個包含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/pe...

分隔線

在此示例中，存在帶有「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/pe...

---

原文：https://www.sitepoint.com/hid...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。