伪元素::after和::before的”前世今生“

序言

在做前端页面时，需要做一些样式上的改变，使用伪元素很轻易就做到了。之前一直说伪元素还可以清除浮动，然后就想了解一下这东西到底能干什么。如下图，之前碰到的，为元素添加边框样式，小程序中修改radio,checkbox的默认样式，都用到了伪元素。

接下来，我们详细了解一下css中的伪元素

伪元素

css3为了区分伪类和伪类元素，伪元素采用了双冒号的写法。
常见伪类::hover，:link，:active，:target，:not()，:focus
常见为元素:::first-letter，::first-line，::after，::before，::selection

这里顺便说一下 :before,:after 与::before,::after的区别
不同点：

• :before/:after是css2的写法，::before/::after是css3的写法，本质写法还是一样
• :before/:after的兼容性要比::before/::after好，所有支持::的浏览器都会支持:，但IE8只支持单冒号，一般开发的话还是使用双冒号即可
  相同点：
• 都可以用作伪元素，用来设置对象前或后的内容
  注意：
• 必须配合content属性一起使用
• 这些元素不会出现在DOM中，所以无法通过js操作，仅仅是css渲染层加入

1.概念理解

伪元素之所以被称为为元素，是因为他们不是真正的元素，他们不会出现在DOM中，主要用于为当前元素增加修饰性的内弄，显示的内容是content，默认是行内元素，如果没有设置content，伪元素是不起作用的，可以为其设置css样式
伪元素几个必要的参数：

• content：字符串：作为内容添加在主元素的前和后
• attr(attr_name)：伪元素跟某个属性值进行关联，伪类元素的内容就是指定属性的值
• url()/uri()：引用外部资源，例如图片
• counter：调用计数器，可以不适用列表元素实现序号问题。、

counter使用案列:本质就是在使用该计数器前必须先设置好计数器名称

1.使用counter-reset:name
2.使用counter-increment累加

2.::before，::after特点

上面说过伪元素是通过样式达到效果，为元素并不会在DOM中，所以总结其特点：

• 伪元素不在DOM中，所以js无法操作它
• 伪元素属于主元素一部分，因此点击它触发的也是主元素的click事件
• 块级元素，行内元素，行内块级元素都可以设置::brfore，::after，但是因为行内块元素可替换元素，例如：img标签，以为其外观和尺寸都是由外部资源决定的，当外部资源加载正确，就会替换其内部内容，伪元素内容就会被替换掉，但当加载失败时，伪元素可以发挥一些效果。
  总结一下伪元素的优缺点：
  1.优点
• 解决一些问题可以无需增加DOM节点就可以解决
• 可以让css解决部分js问题
  2.缺点
• 不利于SEO
• 无法审查元素，调试样式比较困难

伪元素的使用场景

1.清除浮动

这个在我对浮动的博客已经有详细解释了，这里就自己简单介绍伪元素清除浮动。
清除浮动本质解决的是子元素浮动后，父元素高度为零的现象。其中一个解决方法是在子元素后添加一个空的div设置clear:both，这样可以解决，但是却添加了DOM树复杂程度，因此使用伪元素，就两两全其美了。
使用伪类元素是清除浮动的正常方法

如上图，清除浮动前后对比，效果明显。
对清除浮动有兴趣的请移步css之浮动（图文并茂）详细了解

2.改变某些元素的默认样式

例如：img图片失效时默认样式如下

我们可以使用伪元素修改默认的样式

代码：

 		img::before{
   
            content: '\21BB' "Broken of the Image";
            display: block;
            width: 100%;
            height: 100px;
            background-color:lightgray;
            position: absolute;
        }
        img{
   
            content: '';
            display: block;
            font-size: 16px;
            position: absolute;
            width: 100%;
            text-align: center;
        }

控件原样式

修改后

代码

		/*调小控件大小*/