初識(shí)
這篇文章是第一次系統(tǒng)的了解偽元素的一個(gè)記錄，以前也知道偽元素动漾，但是處于一知半解的狀態(tài)丁屎。又碰巧前段時(shí)間被人問(wèn)起偽元素卻什么都說(shuō)不出來(lái)，所以這次就完全的了解一下偽元素旱眯。
什么是偽元素悦屏，他存在的意義是什么？
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
CSS引入了偽元素和偽類(lèi)的概念键思，以允許基于格式化位于文檔樹(shù)之外的信息础爬。
這是官方的解釋?zhuān)@里又引入了一個(gè)概念，什么是文檔樹(shù)吼鳞？
文檔樹(shù)看蚜，就是文檔層次形成的樹(shù)，就是平常寫(xiě)的html,比如
<html>
<body>
<div>
</div>
</body>
</html>
這就是一個(gè)文檔赔桌，里面一堆dom形成的結(jié)構(gòu)就叫做文檔樹(shù)供炎。
這樣再看偽元素的描述，允許基于格式化位于文檔樹(shù)之外的信息疾党，也就是說(shuō)偽元素不存在與文檔樹(shù)內(nèi)音诫，但是他卻也能夠存在于頁(yè)面的布局中。這樣雪位，對(duì)于一些布局結(jié)構(gòu)竭钝，使用偽元素可以減少dom的復(fù)雜度，并且更加便捷雹洗。
偽元素主要是以::或者:來(lái)定義香罐，css3的文檔中規(guī)定，偽元素要以::來(lái)定義时肿，而偽類(lèi)用:來(lái)定義以此來(lái)區(qū)分兩者庇茫。
具體作用
偽元素含有一個(gè)很特殊的屬性。就是content螃成，可以通過(guò)這個(gè)來(lái)設(shè)置偽元素的內(nèi)容旦签，并且這個(gè)偽元素默認(rèn)是行內(nèi)元素。
目前遇見(jiàn)過(guò)三種content內(nèi)容
- 普通的內(nèi)容寸宏，比如在一個(gè)span之前添加一個(gè)說(shuō)明文字宁炫，“用戶(hù)名：”這一類(lèi)的。
- 當(dāng)前dom屬性击吱，例如
<div class="test" data-title="金額:">1.0</div>
.test::before{
content:attr(data-title);
}
這樣就可以和js很方便的配合來(lái)做一些以前很麻煩的事情淋淀。
- 圖標(biāo)遥昧，例如"\E600",這種方式要首先將圖標(biāo)定義成字體文件引入覆醇，然后再設(shè)置content為圖標(biāo)的值朵纷，這樣就可以做成一些圖標(biāo)頭的效果。
下面就具體看看各類(lèi)偽元素的用法
::before/::after
mdn定義：::before會(huì)為當(dāng)前元素創(chuàng)建一個(gè)子元素作為偽元素永脓。常通過(guò) content 屬性來(lái)為一個(gè)元素添加修飾性的內(nèi)容袍辞。 此元素默認(rèn)為行內(nèi)元素。
before和字面意思一樣常摧，會(huì)在元素前面插入偽元素搅吁，after則是在后面。
這屬性的用處很大落午。
首先是第一種 添加說(shuō)明文字
比如在一個(gè)div之前插入一些文字,但是這里會(huì)有一個(gè)誤區(qū)谎懦，那就是input元素，由于偽元素是要插入在元素內(nèi)部的溃斋，但是input并沒(méi)有一個(gè)容器可以提供插入界拦，所以，input和一些非容器類(lèi)元素是不支持這類(lèi)用法的梗劫。
第二種享甸，其實(shí)就是第一種的另一種用法，采用data-title之類(lèi)的形式來(lái)提供content的值
第三種梳侨，清除浮動(dòng)
在偽元素內(nèi)設(shè)置 clear:both;,這個(gè)其實(shí)和設(shè)置一個(gè)空的div來(lái)設(shè)置clear屬性是一樣的效果蛉威，只是更加方便。
第四種走哺，繪制高dpi屏幕1px線
通過(guò)設(shè)置偽元素絕對(duì)定位于邊框上蚯嫌，并且設(shè)置縮放，從而達(dá)到1px的目的丙躏。
其實(shí)按照第四種的思路齐帚，可以達(dá)到很多其他的效果，可以想象彼哼，自己有一個(gè)貼紙对妄，自己通過(guò)制作貼紙來(lái)裝飾目標(biāo)元素。
第五種敢朱，元素居中
