before && after

这两个伪类元素功能很相似,都是在元素内部插入新的内容。下面一起看下他们的区别和用法。

1. 官方定义

before:元素的内容之前插入新内容。
after:元素的内容之后插入新内容。

2. 慕课解释

beforeafter 的功能就是在元素的内部的原有内容之前,或者之后插入新的内容。

3. 语法

.demo:before{

}
.demo:after{
    
}

解释:使用方法如上面,通过在元素选择器后面增加一个 : 来开始伪类的使用。

4. 兼容性

IE Edge Firefox Chrome Safari Opera ios android
all all all all all all all all

5. 实例

<div class="demo">慕课网</div>
  1. 在元素内容之前插入文字:姓名。
 .demo:before{
    content: '姓名:';
}

效果图:

图片描述

元素内容之前插入文字:姓名 效果图
实例演示
预览 复制