::before和::after

::before和::after

定义：是css里的伪元素,在css渲染时向元素的前面和后面添加内容。

常见场景：添加没有实际意义的修饰性小图标icon。

使用：

1. 加入content（必须有content）,用来放插入的内容。
2. 元素::before(或::after){content: "内容"；其他样式}

eg:

<div class="test">伪元素</div>

//在类名是test的div前面加内容
.test::before{
// 加的内容是%
  content: '%';
//%的颜色设置为金色

  color: gold;
}
.test::after{
  content: '+';
  color: skyblue;
}

 

 结果：

 

 扩展笔记：

一、伪类选择器和伪元素选择器

（一）伪类选择器

定义：作为特殊选择器选择已经存在的元素。

 常见的：

（1）a标签的伪类选择器：

a:link（没有访问过）,

a:visited（已访问过）,

a:active（激活）,

a:hover（鼠标悬停）,

注意事项： 写的时候注意a:hover 必须写在 a:link 和 a:visited 后，a:active写在其他的后面。 

（2）序选择器

（3）input选择器

二、伪元素选择器

定义：可能会添加虚拟的元素。