首頁 > 開發者 > JavaScript
大放異彩的虛擬元素——可以做什嗎？(轉)別人分享的文章，發現很不錯，果斷收藏了，大放異彩
虛擬元素:before 和 :after可以做的東西是相當驚人的。對於頁面上的每一個元素，你擁有了兩個更靈活的、而且可以完成其它HTML元素都能完成的東西的元素。它們讓一大堆有趣的設計成為可能，而且不會對你的語義標籤產生負面影響。這裡有一大堆關於這些有趣的效果的樣本，你想看的話就接著往下看吧。
因為你可以將虛擬元素相對於它們的父類元素絕對位置，你可以想象成每個元素都有兩個額外的層。Nicolas Gallagher向我們展示了它的很多種應用，包括多邊界、類比CSS3多重背景、等高欄等。
增加單個元素能建立的形狀數目
這上面所有的形狀都可以只用一個元素建立，而且更加實用。相對於那些使用1700個div元素來“用純CSS做一個咖啡杯”的事情，很整齊，但不實用。
這是一個六角星的樣本：
CSS
#star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative;}#star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px;}
在列印網頁時顯示連結的URL
@media print { a[href]:after { content: " (" attr(href) ") "; }}
清除浮動
相比插入額外的非語義標記來清除內嵌元素的浮動，我們可以使用一個虛擬元素來完成。俗稱"clearfix"，並且使用"group"這個類名也更語義化。
CSS
.group:before,.group:after { content:""; display:table;}.group:after { clear:both;}.group { zoom:1; /* For IE 6/7 (trigger hasLayout) */}
類比float:center;
float屬性實際上並沒有center這個值，儘管我們可能非常需要。float雖然有左浮動和右浮動，但是我們通過使用佔位虛擬元素也可以在兩個容器之間佔一塊位置，並放上一個映像，我們可以看一下效果。
這個網站的當前設計是，使用虛擬元素通過不同的語言來標記代碼塊。
HTML
<pre rel="CSS"></pre>
CSS
pre:after { content: attr(rel); position: absolute; top: 22px; right: 12px;}建立一個完整的表徵圖集
Nicolas Gallagher再次把他的idea提升到了建立一大組表徵圖。沒有使用任何圖片，每兩個元素（最多）只有虛擬元素。
更高效地使用有限的空間使用CSS有所得，也必然有所失。我的意思是虛擬元素的內容可以通過媒體查詢有選擇地應用或刪除。如果空間是有限的，你可能會應用表徵圖，而如果有更多空間的話就可以使用一個更具描述性的單詞。
適用內容多的布局如果你的虛擬元素是文本，它們繼承了和它們的父元素相同的配置樣式。但是當你設定它們的內容時，你也可以編輯它們的樣式。比如說，使用不同的字型和不同的顏色來讓你的標題脫穎而出。
CSS
h2 { text-align: center;}h2:before, h2:after { font-family: "Some cool font with glyphs", serif; content: "\00d7"; /* Some fancy character */ color: #c83f3f;}h2:before { margin-right: 10px;}h2:after { margin-left: 10px;}建立和瀏覽器等寬度的條
當你需要適應瀏覽器寬度的背景，但是元素的內容又不夠將其撐開時，你往往會使用非語義化的內嵌元素包裹或重複且繁瑣的間距聲明。或許你可以試試使用元素來限制內容的寬度來類比效果，通過設定虛擬元素的寬度讓標題列延伸出邊界。
建立一個body邊框
在左邊和右邊設定普通的border，在頂部和底部固定虛擬元素條的位置。完全不使用任何專門的標記，我們就可以得到一個“body border”的效果。
CSS
body:before, body:after { content: ""; position: fixed; background: #900; left: 0; right: 0; height: 10px;}body:before { top: 0;}body:after { bottom: 0;}body { border-left: 10px solid #900; border-right: 10px solid #900;}
做一個閃爍的按鈕
做一個有從白色到透明漸層的虛擬元素塊，把它放在button外邊，然後在滑鼠移至上方時讓它從button上過渡移動，這樣在滑鼠移至上方時，你可以得到一個看起來似乎抓到了一點光的按鈕。只有Firefox、chrome 26+和IE10+支援。
Anton Trollbäck寫的原版效果，Nicolas Gallagher用虛擬元素寫的版本，我自己寫的另一個版本。
在特殊連結被滑鼠移至上方時將頁面淡出
如果你沒有給元素設定相對定位，絕對位置的虛擬元素就會相對於下一個父元素定位。如果沒有寫其它的內容，它就會相對於根項目定位。你可以使用它來做一個填充瀏覽器視窗的元素，將其相對疊齊在主要元素下，然後在滑鼠移至上方於連結上時顯示它，做一個頁面淡出的效果。
將header做成三維絲帶的樣式絲帶大家都很喜歡！查看一下這個樣本的HTML和CSS片段。它使用了一個負的z-index，這在某些情況下需要額外的包裹元素，以防止失去背景不透明的父元素下方的元素。
為有序列表的數字設定樣式你試過為有序列表的數字編寫樣式嗎？你還是做著這些繁瑣的事情，比如把他們包裹在span內，為清單項目寫樣式，然後跟著span一起把樣式刪除。或是胡亂地使用背景映像。或是移除列表樣式，然後放進你自己的數字。這些方法都是非常糟糕的。最好是使用虛擬元素來作為計數器。
在小螢幕上瀏覽大型的資料表是很可怕的。它們要麼是被放大，並要求水平和垂直滾動，要麼是縮得太小，無法閱讀。我們可以把CSS媒體查詢和虛擬元素結合起來，使資料表迅速反應並格式化成一個在小螢幕上更具可讀性的表格。
建立樣式化的提示
使用HTML5資料屬性，然後將該屬性匯入並設定樣式為一個虛擬元素，這樣我們就可以使用CSS來建立完全自訂的提示。
在導航item之間添加分隔字元如果你想將nav item之間相互分隔開，你的選擇是有限的：你可以添加一個邊框（很無聊），或是在每個項目之間添加額外的標記（也很無聊）。虛擬元素可以讓你在項目之間使用任何內容來作為分隔。
CSS
.menu li:before { content: "// "; position: relative; left: -1px;}做一個完全沒有HTML的網站
憑藉瀏覽器自動插入<html>, <head> 和 <body>標籤的功能，Mathias Bynens展示了如何只使用CSS和虛擬元素建立網站。
對每個字母，使用一個HTML元素（包括虛擬元素）。Yusuke Sugomori通過CSS構建了一整套字型，命名為CSS Sans。這個互動demo，可以讓你看到Yusuke用於構建字母的所有巧妙技術（如rotate(旋轉)、border-radius(圓角半徑)、skew(傾斜)等）。
這套字型僅包括了大寫拉丁字母，而且非常可愛！CSS Sans項目是一個很棒的建立在各種約束上的富有創造力的示範！
本文根據@Chris Coyier的《A Whole Bunch of Amazing Stuff Pseudo Elements Can Do》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處：https://css-tricks.com/pseudo-element-roundup/。
原文地址：http://www.w3cplus.com/css3/pseudo-element-roundup.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
