淺談css的偽元素::after和::before css中的::after和::before已經被大量地使用在我們日常開發中了，使用他們可以使我們的文檔結構更加簡潔。但是很多人對::after和::before仍不是特別了解，究竟他們是做什么的？如何使用他們？什么時候 ...

css中的::after和::before已經被大量地使用在我們日常開發中了，使用他們可以使我們的文檔結構更加簡潔。但是很多人對::after和::before仍不是特別了解，究竟他們是做什么的？如何使用他們？什么時候應該使用他們？筆者總結了一些對偽元素的理解和使用經驗。 一、概念 ...

1、selector:before( sRules ) 它要和content屬性一起使用，設置在對象前（依據對象樹的邏輯結構）發生的內容； 2、selector:after( sRules ) 和before用法一樣，不過它是設置在對象后（依據對象樹的邏輯結構）發生的內容； ...

:before和:after的作用就是在指定的元素內容（而不是元素本身）之前或者之后插入一個包含content屬性指定內容的行內元素，最基本的用法如下： #example{ width:300px; height:40px; line-height ...

關於偽類元素:before和:after 　CSS中存在一些比較特殊的屬性，稱之為偽類，它們之中最常用的就是定義鏈接的偽 :link：未被訪問狀態 :visited：已被訪問狀態 :hover：鼠標懸停狀態 :active：活動狀態 除了它們，還有一些不被常使用的偽類 ...

CSS 有兩個說不上常用的偽類 :before 和 :after，偶爾會被人用來添加些自定義格式什么的，但是它們的功用不僅於此。前幾天發現了 Creative Link Effects 這個非常有意思的介紹創意鏈接特效的頁面，里面驚人的效果大量使用到的特性除了 transform 屬性進行變形之外 ...

如果你想在網頁的某些文字前加圖標或者想改變li元素默認的圖標，你會如何做？常見的做法是在文字前再加一個標簽用於存放圖標，引入一個圖標庫（比如Iconfont-阿里巴巴矢量圖標庫）或者一張圖標圖片。 本文價紹一種不用再額外添加html標簽，存粹利用css就能插入或者自作圖標的方式。先了解偽元素 ...

li{ position: relative; float: left; width: 80px; ...