翻譯 | CSS僞元素的罕見用例

前言

純手打翻譯，其中翻譯不許確，請多包涵，歡迎指正

Demo 在每個小段落的結尾

這篇文章翻譯自Uncommon Use Cases For Pseudo Elements

做者： Ahmad Shadeed

轉載須要做者受權

---

僞元素 的使用已經很長時間了。然而，我以爲有不少用例 在開發人員中並不徹底爲人所知。我寫下這篇文章是爲了闡明它們，這樣它們就能夠被更多地使用。

親子懸停效果

僞元素 是屬於它的父元素，因此有一些不尋常的用例 。如今，讓咱們探索一個簡單的例子來講明個人意思。

這個設計是：有一個章節標題，它的左邊有一個小圓圈。當咱們將鼠標懸停 在標題上時，圓圈會變大。

.section-title:before {
    content: "";
    width: 20px;
    height: 20px;
    background: blue;
    /* Other styles */
}

.section-title:hover:before {
    transform: scale(1.2);
}
複製代碼

簡單而直接。讓咱們將這個概念擴展到更多有用的用例上。

項目 / 博客 Section

在個人網站上，我有一個Section用來列出個人全部項目。我想爲每一個項目添加一個縮略圖，但這不是我最優先考慮的事情。對我來講，更重要的是連接自己。我在Ethan Marcotte的網站上首次看到了這種效果。

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

<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，position: relative從.hero中刪除對僞元素有何影響。

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值。因此在任什麼時候候，我都想改變連接的顏色，一樣會做用在其僞元素上。

若是你感到好奇，請轉到個人網站主頁，查看「個人項目」部分。我已經使用了上面的技術。

增長可點擊區域的大小

經過向連接添加僞元素 ，連接周圍的可點擊區域將變大。這很是有用，能夠爲用戶帶來更好的體驗。舉個栗子：

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

詳情請查看CodePen Demo

疊加層

假設有一個帶有背景圖片的元素，而且設計中包含一個漸變疊加層，其混合模式設置爲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;
}
複製代碼

詳情請查看CodePen Demo

包裹的陰影

我不肯定命名是否正確，但這就是我獲得的。過去，我曾經建立過一個在邊緣傾斜的陰影。它有一點微妙的效果。你猜怎麼着！可使用僞元素來完成它們。

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 應該爲負數以實現所需的效果。

.elem:before {
    transform: skew(-2deg);
}

.elem:after {
    transform: skew(2deg);
}
複製代碼

接下來，我將向每一個僞元素添加 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 值。 這將獲得不一樣的效果。

詳情請查看CodePen Demo

使用 : 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 Element

在這種狀況下，標題將顯示在僞元素疊加圖的下方，以下所示。

解決方案是添加z-index到card-title中。即便這是一個快速簡便的解決方案，也不是正確的選擇。

.card-title {
    /*Other styles*/
    z-index: 1;
}
複製代碼

2）Before Element

在:before疊加層上使用元素時，默認狀況下可使用！無需添加z-index到card-title。緣由是在使用時:before，該元素不會出如今其餘同級項的上方，而當使用:after時則會出現。

詳情請查看CodePen Demo

基於文件擴展的樣式連接

---

例如，有一個帶有 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;
}
複製代碼

分隔符

對於這個示例，有一個帶有 「或」 的分隔符而且每一邊都有一條線。 可使用僞元素 和 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;
}
複製代碼

事實證實，有一個更好的方法來作到這一點。在這種狀況下使用 <hr> 會更好。

查看CodePen Demo瞭解更多