【CSS進階】僞元素的妙用--單標籤之美

 

 

最近在研讀 《CSS SECRET》（CSS揭祕）這本大做，對 CSS 有了更深層次的理解，折騰了下面這個項目：

CSS3奇思妙想 -- Demo （請用 Chrome 瀏覽器打開，很是值得一看）。採用單標籤完成各類圖案，許多圖案與本文有關。

也但願以爲不錯的同窗順手在個人 Github 點個 star ： CSS3奇思妙想 。

 

正文從這裏開始，本文主要講述一下 僞元素 before 和 after 各類妙用。

   :before和::before的區別

在介紹具體用法以前，簡單介紹下僞類和僞元素。僞類你們聽的多了，僞元素可能聽到的不是那麼頻繁，其實 CSS 對這兩個是有區分的。

有時你會發現僞類元素使用了兩個冒號 (::) 而不是一個冒號 (:)，這是 CSS3 規範中的一部分要求，目的是爲了區分僞類和僞元素，大多數瀏覽器都支持這兩種表示方式。

1 2 3 4 5 6

#id:after{   ... } #id::after{   ... }

單冒號(:)用於 CSS3 僞類，雙冒號(::)用於 CSS3 僞元素。對於 CSS2 中已經有的僞元素，例如 :before，單冒號和雙冒號的寫法 ::before 做用是同樣的。

因此，若是你的網站只須要兼容 webkit、firefox、opera 等瀏覽器，建議對於僞元素採用雙冒號的寫法，若是不得不兼容 IE 瀏覽器，仍是用 CSS2 的單冒號寫法比較安全。

更加具體的信息，能夠看看 MDN 對僞類和僞元素的理解。

本文的主角就是僞元素 before 和 after ，下面將具體講講這兩個僞元素的魅力。

 

   哪些標籤不支持僞元素？（補充於2016.06.28）

我也是才知道這個姿式。爲了避免誤導讀者，就趕忙補充一下。

僞元素雖然強大，可是仍是有一些特定的標籤是不支持僞元素 before 和 after 的。

諸如 <img> 、<input>、<iframe>，這幾個標籤是不支持相似 img::before 這樣使用。

究其緣由，要想要標籤支持僞元素，須要這個元素是要能夠插入內容的，也就是說這個元素要是一個容器。而 input，img，iframe 等元素都不能包含其餘元素，因此不能經過僞元素插入內容。

 

   利用 after 清除浮動

這個估計是前端都知道，運用 after 僞元素清除頁面浮動，不作過多解釋。

1 2	.clearfix:after { content : "." ;  display : block ;  height : 0 ;  visibility : hidden ;  clear : both ; } .clearfix { *zoom: 1 ; }

　　

   僞元素與 css sprites 雪碧圖

這個也是老姿式了。雪碧圖你們應該也不陌生，經過將多個圖片 icon 合爲一張圖，從而爲了減小 http 請求，不少網站對雪碧圖的需求仍是很大的。

可是在製做雪碧圖的過程當中，或者如今不少的打包工具自動生成的雪碧圖，都存在着須要爲每一個 icon 須要預留多少邊距的問題。看看下圖：

--> 

譬如上面這種狀況（假設按鈕中的圖標是採用了雪碧圖），產品某天忽然要求按鈕從狀態左變爲狀態右，那麼雪碧圖原先預留的位置邊距確定就不夠了，致使其餘圖形出如今按鈕中。

而咱們一般不會爲了一個小 icon 多添加一個標籤（不符合語義化）。

因此一般這種狀況須要用到雪碧圖的話，都是在按鈕中設置一個僞元素，將僞元素的高寬設置爲本來 icon 的大小，再利用絕對定位定位到須要的地方，這樣不管雪碧圖每一個 icon 的邊距是多少，都可以完美適應。

 

   單個顏色實現按鈕 hover 、active 的明暗變化

最近項目有個這樣的需求，根據不一樣的業務場景，運營須要配置一個按鈕的不一樣背景色值。可是咱們知道，一個按鈕一般而言是有 3 個色值的，normal 狀態的，hover 狀態的和 active 狀態的，一般 hover 是比原色稍微亮一點，active 則是稍微暗一點。

大概是這樣（下圖）：

爲了減輕運營同窗的負擔，怎麼樣作到只配置一個背景色不配置 hover 和 active 顏色讓按鈕也能自適應跟隨變化呢。是的，用上 before、after 兩個僞元素能夠作到。

顏色小知識

這裏要科普一下顏色值的小知識。咱們熟知的顏色表示法除了 #fff ，rgb(255,255,255)，還有 hsl(0, 100%, 100%)（HSV）。 

以 HSL 爲例，它是一種將 RGB 色彩模型中的點在圓柱座標系中的表示法。HSL 即色相、飽和度、亮度（英語：Hue, Saturation, Lightness）。

對於一個使用 HSL 表示的顏色，咱們只須要改變 L （亮度）的值，就能夠獲得一個更亮一點或者更暗一點的顏色。

固然改變亮度，還能夠經過疊加透明層實現，這裏使用僞元素改變按鈕背景色就是經過疊加半透明層實現。

簡單來講，在背景色上方疊加一個白色半透明層 rgba(255,255,255,.2) 能夠獲得一個更亮的顏色。（這句話不是很嚴謹，假設一個元素背景是純白顏色，疊加白色半透明層也是不會更亮的）

反之，在背景色上方疊加一個黑色半透明層 rgba(0,0,0,.2) 能夠獲得一個更暗的顏色。

因此，咱們用 before 僞元素生成一個與按鈕大小一致的黑色半透明層 rgba(0,0,0,.2)，在 .btn:hover:before 時顯示，用 after 僞元素生成一個與按鈕大小一致的白色半透明層 rgba(255,255,255,.2)，在 .btn:active:before 時顯示，就能夠作到只配置一個背景底色，實現 hover 、active 的時的明暗變化。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.pesudo:before{    position :  absolute ;    top :  0 ;  right :  0 ;  bottom :  0 ;  left :  0 ;    z-index : -1 ;    background :rgba( 0 , 0 , 0 ,. 1 ); } .pesudo:hover:before{    content : "" ; } .pesudo:after{    position :  absolute ;    top :  0 ;  right :  0 ;  bottom :  0 ;  left :  0 ;    z-index : -1 ;    background :rgba( 255 , 255 , 255 ,. 2 ); } .pesudo:active:after{    content : "" ; }

戳我看demo （請用 Chrome 瀏覽器打開）。

 

   變形恢復

有的時候，設計師們但願經過一些比較特殊的幾何圖形，表達不一樣的意思。

用 CSS3 transfrom 屬性，咱們能夠輕鬆的獲得一個梯形，菱形或者平行四邊形。有時咱們設計師們但願在這些容器內配上文字，譬如平行四邊形能夠表達一種速度之感。

可是如上圖所示，內容文字也會跟着 CSS3 變換一塊兒發生了扭曲，一般咱們會用一個 div 作背景進行變換，而文字則是放在另一個 div 中。

可是運用僞元素，咱們能夠去掉這些不合語義化多餘的標籤，運用 before 僞元素，將 CSS3 變換做用於僞元素上，這樣變形不會做用於位於 div 上的的文字，並且沒有使用多餘的標籤。

戳我看demo （請用 Chrome 瀏覽器打開）。

 

   僞元素實現換行，替代<br>換行標籤

你們都知道，塊級元素在不脫離正常佈局流的狀況下是會自動換行，而行級元素則不會自動換行。但在項目中，有需求是須要讓行級元素也自動換行的，一般這種狀況，我都是用 <br/> 換行標籤解決。而 《CSS SECRET》 中對 <br /> 標籤的描述是，這種方法不只在可維護性方面是一種糟糕的實踐，並且污染告終構層的代碼。 想一想本身敲代碼以來，用的 <br/> 標籤還真很多。

運用 after 僞元素，能夠有一種很是優雅的解決方案：

1 2 3 4

.inline-element::after{      content :  "\A" ;      white-space :  pre ; }

經過給元素的 after 僞元素添加 content 爲 "\A" 的值。這裏 \A 是什麼呢？

有一個 Unicode 字符是專門表明換行符的：0x000A 。 在 CSS 中，這個字符能夠寫做 "\000A"， 或簡化爲 "\A"。這裏咱們用它來做爲 ::after 僞元素的內容。也就是在元素末尾添加了一個換行符的意思。

而 white-space: pre; 的做用是保留元素後面的空白符和換行符，結合二者，就能夠輕鬆實如今行內級元素末尾實現換行。

原文Demo。

 

   加強用戶體驗，使用僞元素實現增大點擊熱區

按鈕是咱們網頁設計中十分重要的一環，而按鈕的設計也與用戶體驗息息相關。讓用戶更容易的點擊到按鈕無疑能很好的增長用戶體驗，尤爲是在移動端，按鈕一般都很小，可是有時因爲設計稿限制，咱們不能直接去改變按鈕元素的高寬。那麼這個時候有什麼辦法在不改變按鈕本來大小的狀況下去增長他的點擊熱區呢？

這裏，僞元素也是能夠表明其宿主元素來響應的鼠標交互事件的。藉助僞元素能夠輕鬆幫咱們實現，咱們能夠這樣寫：

1 2 3 4 5 6 7 8

.btn::befoer{    content : "" ;    position : absolute ;    top : -10px ;    right : -10px ;    bottom : -10px ;    left : -10px ; }

固然，在 PC 端下這樣子看起來有點奇怪，可是合理的用在點擊區域較小的移動端則能取到十分好的效果，效果以下：

   more magic -- 單標籤圖案

上面介紹的是僞元素衆多用法的一部分，僞元素的做用遠不止於此。有了before 、after 兩個僞元素。一個標籤其實能夠至關於 3 個標籤來使用，而配合 CSS3 強大的 3D 變換、多重背景，多重陰影等手段，讓單標籤做畫成爲了可能，下面是我僅用單個標籤，實現的一些動畫效果：

單標籤實現瀏覽器圖標：

 

單標籤天氣圖標：

CSS3奇思妙想，採用單標籤完成各類圖案 -- Demo （請用 Chrome 瀏覽器打開，很是值得一看）。

也但願以爲不錯的同窗順手在個人 Github 點個 star ： CSS3奇思妙想 。