起因于不理解下圖點的寫法，后來發現是個很基礎的東西

? ? ??

運用了偽類元素:before，如下

注意，他的css寫法也是非常簡潔高效的。

?

查閱了些關于偽類before和after的知識幫助理解，以下摘自：http://www.hulufei.com/post/about-before-and-after-pseudo-element

---

?

:before和:after的作用就是在指定的元素內容（而不是元素本身）之前或者之后插入一個包含content屬性指定內容的行內元素，最基本的用法如下：

#example:before {content:"#";color: red;}#example:after {content:"$";color: red;}

?

這段代碼會在#example元素內容之前插入一個'#'，以及在內容之后添加一個'$'，插入的行內元素是作為#example的子元素，效果如下:

Here is the example content

需要注意的是如果沒有content屬性，偽類元素將沒有任何作用。但是可以指定content為空，同時正如前面所說，插入的內容默認是一個行內元素，并且在HTML源代碼中無法看到，這就是為什么稱之為偽類元素的理由，所以也就無法通過DOM對其進行操作。

#example:before {content:"";display: block;width:100px;height:100px;}

?

偽類元素也會像其他子元素一樣正常繼承父元素的一些CSS屬性，比如字體等。

除了插入文字內容，還可以指定其他內容：

p:before {content: url('img.jpg');} a:after {content: attr(href);}

?

attr()函數會返回指定元素對應屬性的值

最后，奉上最惦記的瀏覽器支持情況

• Chrome 2+,
• Firefox 3.5+ (3.0 had partial support),
• Safari 1.3+,
• Opera 9.2+,
• IE8+ (with some minor bugs),
• Pretty much all mobile browsers.

放在偽類元素里面的內容一般都只是裝飾性的，所以即便是IE6/7不支持也應該能降級到正常顯示主體內容。

:before和:after的一些驚人用法

>. clearfix hack

如果父元素容器里面的子元素是浮動元素的話，我們一般需要在父元素閉合前添加一個clear:both的元素用于清除浮動從而能使父容器正常被子元素內容撐起，但是這種方法引入了多余的無意義標簽，并且有javascript操作子元素的時候容易引發bug。一種更好的方法是利用CSS，所以在一些CSS文件中經常會看到類似于.clearfix這樣的類出沒，只要在父容器上應用這個類即可實現清除浮動。下面是利用:before和:after的一個實現：(viaNicolas Gallagher)

/* For modern browsers */.clearfix:before,.clearfix:after {content:"";display:table;}.clearfix:after {clear:both;}/* For IE 6/7 (trigger hasLayout) */.clearfix {zoom:1;}

>. CSS實現的八卦圖案

?

#yin-yang {width:96px;height:48px;background:#eee;border-color: red;border-style: solid;border-width:2px2px50px2px;border-radius:100%;position: relative;}#yin-yang:before {content:"";position: absolute;top:50%;left:0;background:#eee;border:18px solid red;border-radius:100%;width:12px;height:12px;}#yin-yang:after {content:"";position: absolute;top:50%;left:50%;background: red;border:18px solid #eee;border-radius:100%;width:12px;height:12px;}

?

?

資源鏈接

• Learning To Use The :before And :after Pseudo-Elements In CSS
• The Shapes of CSS
• Pseudo-elements reference
• Add steps counter in form via CSS

轉載于:https://www.cnblogs.com/2boy/p/3316842.html

總結

以上是生活随笔為你收集整理的认识伪类元素:before和:after的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。