初识
这篇文章是第一次系统的了解伪元素的一个记录，以前也知道伪元素，但是处于一知半解的状态。又碰巧前段时间被人问起伪元素却什么都说不出来，所以这次就完全的了解一下伪元素。
什么是伪元素，他存在的意义是什么？
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
CSS引入了伪元素和伪类的概念，以允许基于格式化位于文档树之外的信息。
这是官方的解释，这里又引入了一个概念，什么是文档树？
文档树，就是文档层次形成的树，就是平常写的html,比如
<html>
<body>
<div>
</div>
</body>
</html>
这就是一个文档，里面一堆dom形成的结构就叫做文档树。
这样再看伪元素的描述，允许基于格式化位于文档树之外的信息，也就是说伪元素不存在与文档树内，但是他却也能够存在于页面的布局中。这样，对于一些布局结构，使用伪元素可以减少dom的复杂度，并且更加便捷。
伪元素主要是以::或者:来定义，css3的文档中规定，伪元素要以::来定义，而伪类用:来定义以此来区分两者。
单双冒号对照表.png
具体作用
伪元素含有一个很特殊的属性。就是content，可以通过这个来设置伪元素的内容，并且这个伪元素默认是行内元素。
目前遇见过三种content内容
- 普通的内容，比如在一个span之前添加一个说明文字，“用户名：”这一类的。
- 当前dom属性，例如
<div class="test" data-title="金额:">1.0</div>
.test::before{
content:attr(data-title);
}
这样就可以和js很方便的配合来做一些以前很麻烦的事情。
- 图标，例如"\E600",这种方式要首先将图标定义成字体文件引入，然后再设置content为图标的值，这样就可以做成一些图标头的效果。
下面就具体看看各类伪元素的用法
::before/::after
mdn定义：::before会为当前元素创建一个子元素作为伪元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。
before和字面意思一样，会在元素前面插入伪元素，after则是在后面。
这属性的用处很大。
首先是第一种 添加说明文字
比如在一个div之前插入一些文字,但是这里会有一个误区，那就是input元素，由于伪元素是要插入在元素内部的，但是input并没有一个容器可以提供插入，所以，input和一些非容器类元素是不支持这类用法的。
第二种，其实就是第一种的另一种用法，采用data-title之类的形式来提供content的值
第三种，清除浮动
在伪元素内设置 clear:both;,这个其实和设置一个空的div来设置clear属性是一样的效果，只是更加方便。
第四种，绘制高dpi屏幕1px线
1px.png
通过设置伪元素绝对定位于边框上，并且设置缩放，从而达到1px的目的。
其实按照第四种的思路，可以达到很多其他的效果，可以想象，自己有一个贴纸，自己通过制作贴纸来装饰目标元素。
第五种，元素居中
元素居中.png
网友评论