CSS 偽元素的一些罕見用例
本文轉(zhuǎn)載自微信公眾號「大遷世界」，轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。
偽元素已經(jīng)使用了很長時(shí)間。然而，我覺得有些用例并不是所有開發(fā)人員都完全了解的。我寫下這篇文章是為了闡明它們，以便它們能被更多地使用。
父子元素懸停特效
由于偽元素屬于其父元素，因此存在一些不尋常的用例?，F(xiàn)在，讓我們看一個(gè)簡單的示例。
這個(gè)設(shè)計(jì)有一個(gè) section title，在它的左邊有一個(gè)小圓圈。當(dāng)我們將鼠標(biāo)懸停在section title上時(shí)，圓圈會(huì)變大。
- .section-title:before {
- content: "";
- width: 20px;
- height: 20px;
- background: blue;
- /* Other styles */
- }
- .section-title:hover:before {
- transform: scale(1.2);
- }
簡單明了，接著我們將此概念延伸到更有用的用例。
項(xiàng)目/博客組
在我的網(wǎng)站上，有一個(gè)部分需要列出了所有的項(xiàng)目名稱。我想為每個(gè)項(xiàng)目添加一個(gè)縮略圖，但這對我來說并不是最重要的事情。對我來說，更重要的是鏈接本身。不久前，我在[Ethan Marcotte][1]網(wǎng)站上首次看到了這種效果。
上面的設(shè)計(jì)模型展示了我想要應(yīng)用的想法。段落中的每個(gè)彩色鏈接都有一個(gè)與之配對的偽元素。
「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是一個(gè)解決方案。
2. 對偽元素進(jìn)行絕對定位
為了絕對定位它們，我需要定義哪個(gè)父類是相對的父類。它應(yīng)該被添加到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作為偽元素背景色。如果你不知道這個(gè)關(guān)鍵字，它表示繼承其父元素的color值。所以在任何時(shí)候，我想要改變鏈接的顏色，只改變一次是很容易的。
事例源碼：https://codepen.io/shadeed/pen/66e9c2039b50463d96a2a9832f05ec0f
增加可點(diǎn)擊區(qū)域的大小
通過向鏈接添加一個(gè)偽元素，鏈接周圍的可點(diǎn)擊區(qū)域?qū)⒆兊酶?。這是非常有用的，將增強(qiáng)用戶的體驗(yàn)。我們舉個(gè)例子：
此外，它還可以用于擴(kuò)展卡片組件的可點(diǎn)擊區(qū)域，該組件具有查看更多鏈接的功能。請注意，文章的內(nèi)容(如標(biāo)題和圖像)將位于偽元素之上，因此它不會(huì)影響文本的選擇或圖像的保存。
疊加層
假設(shè)有一個(gè)帶有背景圖像的元素，并且設(shè)計(jì)中有一個(gè)漸變疊加層，并且混合模式設(shè)置為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
包裹的陰影
過去，我曾經(jīng)創(chuàng)建過一個(gè)在邊緣傾斜的陰影。它有一點(diǎn)微妙的效果。你猜怎么了!可以使用偽元素來實(shí)現(xiàn)它們。
1. 創(chuàng)建元素
使用以下常規(guī)樣式創(chuàng)建了一個(gè)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. 添加偽元素
然后，我為每個(gè)元素添加了:before和:after偽元素，其寬度為50%(為了更好的演示，我為每個(gè)元素添加了不同的背景)
- .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應(yīng)該為負(fù)數(shù)以實(shí)現(xiàn)所需的效果。
c4a1.png" target="_blank">c4a1.png" width="auto" border="0" height="auto" alt="" title="">
接下來，我將向每個(gè)偽元素添加z-index：-1，以將其移到其父元素的后面。
完成后，執(zhí)行以下操作：
- 添加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。為什么?因?yàn)樵谑褂?after時(shí)，可能需要我們向其他嵌套元素添加z-index，以便偽元素不會(huì)與它們重疊。我們舉一個(gè)真實(shí)的例子。
這是一張由縮略圖和標(biāo)題組成的簡單卡片。注意到，在文本下方會(huì)有一個(gè)漸變疊加層，以使文本更清晰，以防縮略圖顏色太淺。
- <article class="card">
- <img src="article.jpg" alt="">
- <h2>Title here</h2>
- </article>
要在文本下方添加漸變疊加層，我將需要使用偽元素。你會(huì)選擇哪一個(gè)?:before或:after?我們來研究看看。
1. after 元素
在這種情況下，標(biāo)題將顯示在偽元素疊加圖的下方，如下所示：
解決方案是在卡片標(biāo)題中添加z-index。即使這是一個(gè)簡單快速的解決方案，也不是正確的做法。
- .card-title {
- /*Other styles*/
- z-index: 1;
- }
2. before 元素
使用:before元素時(shí)，默認(rèn)情況下可以使用!無需在卡片標(biāo)題中添加z-index。原因是，使用:before時(shí)，該元素不會(huì)出現(xiàn)在其他同級項(xiàng)的上方，而當(dāng)元素為:after時(shí)，它將出現(xiàn)在其他同級項(xiàng)之上。
事例源碼：https://codepen.io/shadeed/pen/0032e918818efe33b9016434a98bf6ff
基于文件擴(kuò)展名的鏈接樣式
例如，如果有一個(gè)包含PDF文件的鏈接，則可以添加PDF圖標(biāo)，以使其對用戶更清晰。
面是如何顯示鏈接的PDF圖標(biāo)的示例
「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”的分隔符。在每一側(cè)都有一條線。使用偽元素和 Flexbox 可以做到這一點(diǎn)。
「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
