:before/:after与::before/::after的区别 和属性content:值

Posted 2022-09-10 jiunie

一、伪元素和伪类是非常相像的两个东西。在实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:Pseudo-classes
::Pseudo-elements

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

 

二、基本用法：

p::after 
img::before

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

注：img和input没有该属性；

content的内容一般可以为以下四种：

 none： 不生成任何值。
 attr()： 插入标签属性值。通常和自定义属性data-配合使用，因为传统的其它属性虽然也能存值，但通常不适合存放表达性文字。

  <div data-line="1"></div>

    div[data-line]:after content: attr(data-line);/* 属性名称上不要加引号！ */ 

 url()： 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
 string： 插入字符串
 counter()：调用计数器，可以不适用列表元素实现序号功能。具体参见counter-increment和counter-reset属性的用法。

 h2:before  counter-increment: chapter; content: "Chapter " counter(chapter) ". " 

二、进阶用法：

1.清除浮动

.clearfix *zoom: 1;

.clearfix:before,
.clearfix:after 
    display: table;
    line-height: 0;
    content: "";


.clearfix:after 
    clear: both;

 

2.制作三角

.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;