:after/::after和:before/::before的区别

Posted 2022-08-05 前端向朔

基本概念

1.他们都是CSS伪元素，与:hover/:active等伪类不一样。
2.:before/:after伪元素是在CSS2中提出来的，所以兼容性可能到IE8了。
3.::before/::after是CSS3中的写法，为了将伪类和伪元素区分开。但是平时为了兼容性，还是会用一个冒号的写法。

基本用法

p:after 
img:before

这两个伪元素下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。比较有用的是以下几个值：

• [String] – 使用引号包括一段字符串，将会向元素内容中添加字符串。示例： a:after content: "↗";

• attr() – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例：a:after content:"(" attr(href) ")";

• url() / uri() – 用于引用媒体文件。示例： h1::before content: url(logo.png);

• counter() – 调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例：
  h2:before counter-increment: chapter; content: "Chapter " counter(chapter) ". "

进阶用法
我们最常用的就是用来清除浮动和制作三角之类的特殊元素了。
现在大家常用的清除浮动的方法：

.clearfix *zoom: 1;
.clearfix:before,.clearfix:after display: table;line-height: 0;content: "";
.clearfix:after clear: both;

制作三角的方法：

    .c-main:before
    content: '';
    border-top: 9px solid transparent;/*方框上部分背景颜色为透明*/
    border-bottom: 9px solid transparent;/*方框下部分背景为透明*/
    border-right: 9px solid #eee;/*箭头背景颜色*/
    position: absolute;/*绝对定位1*/
    top: 25px;/*距离顶部位置偏移量2*/
    left: -9px;/*距离左边位置偏移量3*/ /*123都是控制显示位置的*/
    
    .c-main:after
    content: '';
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #fbfdfb;/*箭头背景颜色，覆盖前面的#eee颜色，使其颜色与整体颜色一致*/
    position: absolute;
    top: 27px;
    left: -7px;
    

定位都是其次的，主要是看border设置。一边有颜色，其他三边透明就可以实现。

参考文章：
http://blog.dimpurr.com/css-before-after/