CSS伪元素 CSS:before CSS伪元素(Pseudo Element):after与:before

CSS伪元素是指用于在元素的前面或者后面插入虚拟元素，以实现更为灵活的样式效果的一种技术。在CSS中，伪元素通常使用“:before” 和 “:after” 来表示前后虚拟元素。

CSS伪元素：before

基础语法

selector::before {
  content: "";
  display: block;
}

• selector：选择器，选择要使用伪元素添加样式的元素；
• before：伪元素名，表示在选择器所指元素之前插入虚拟元素；
• content：虚拟元素内容，可以是文字、图片等等；
• display：虚拟元素的display属性，通常设置为block，表示虚拟元素是一个块级元素。

示例1

<div class="box"></div>

.box::before {
  content: "Before";
  display: block;
  background-color: yellow;
  color: red;
  font-size: 20px;
  padding: 10px;
}

该示例使用CSS伪元素:before在div.box元素之前插入虚拟元素，并设置虚拟元素的内容为“Before”，背景色为黄色，文字颜色为红色，字体大小为20px，内边距为10px。

示例2

<div class="box"></div>

.box::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("heart.png");
  background-repeat: no-repeat;
  background-size: cover;
}

该示例使用CSS伪元素:before在div.box元素之前插入虚拟元素，并设置虚拟元素的大小为50x50px，背景图片为heart.png，通过background-size属性将图片自适应伪元素的大小并填充。

CSS伪元素：after

基础语法

selector::after {
  content: "";
  display: block;
}

• selector：选择器，选择要使用伪元素添加样式的元素；
• after：伪元素名，表示在选择器所指元素之后插入虚拟元素；
• content：虚拟元素内容，可以是文字、图片等等；
• display：虚拟元素的display属性，通常设置为block，表示虚拟元素是一个块级元素。

示例1

<div class="box"></div>

.box::after {
  content: "After";
  display: block;
  background-color: yellow;
  color: red;
  font-size: 20px;
  padding: 10px;
}

该示例使用CSS伪元素:after在div.box元素之后插入虚拟元素，并设置虚拟元素的内容为“After”，背景色为黄色，文字颜色为红色，字体大小为20px，内边距为10px。

示例2

<div class="box"></div>

.box::after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("heart.png");
  background-repeat: no-repeat;
  background-size: cover;
}

该示例使用CSS伪元素:after在div.box元素之后插入虚拟元素，并设置虚拟元素的大小为50x50px，背景图片为heart.png，通过background-size属性将图片自适应伪元素的大小并填充。

总之，使用CSS伪元素能够让我们在样式上做出更为灵活的效果。