先介紹下偽類和偽元素：
偽類：操作的是在dom結構中已經存在的元素，可以對它進行一些樣式的調整，比如:active,:hover等，一般用單冒號，感覺像是給元素新增乙個class，然後設定樣式；
偽元素：操作的是在dom結構中不存在的元素，比如::after,::before等，可以對新新增的元素設定樣式等，一般用雙冒號，感覺像是新增乙個新的元素，然後給它設定一些東西。
相同點：他們都是在css中進行編寫的。
效果如下：
使用了css3的偽元素，即相當於是在乙個div中寫入文字，然後在它前後各加了乙個div，然後進行位置及寬高的調節。
實現**：
中間文字，兩邊橫線新增偽元素div是對選擇器進行新增的，不需在html元素中新增，要想實現上面效果，也可以在html**中前後各新增兩個div，但是需要再定位及調節樣式，比較麻煩。div
/*css偽類用法*/
div:after, div:before
原理：
1.**中只寫乙個div，然後在css樣式中，對該div設定flex布局，再新增:before,:after，此時可以寫自己想要的樣式。content設定可以為""，若是想要在前後面插入文字，可以設定content為相應的文字；
2.對該元素（div）設定flex，則可以看到新增的before、after樣式。
css實現中間文字，兩邊橫線效果
1.vertical align屬性實現效果 vertical align 屬性設定元素的垂直對齊方式。該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。div class header span class line span span class text ...
中間文字，兩邊橫線（純css實現的哦）
最近在做專案的時候，遇到了乙個中間文字，兩邊橫線的布局，如下圖 第一種 如下 到底了 這裡使用了背景色和透明度，細心的人可能會發現，body設定的背景色剛好是 到底了 的文字的背景色，同時也用了行內塊 透明度以及相對定位來實現了的噢。第二種 後來，在網上找到了不同的方法，如下 產品清單 在css樣式...
css3 文字流光漸變 背景模糊 邊框兩邊伸展
文字流光漸變 background image 使用css3的漸變繪製影象，從左到右 background image webkit linear gradient left,3498db,f47920 10 d71345 20 f7acbc 30 ffd400 40 3498db 50 f4792...