CSS3新增选择器——伪元素选择器

定义

利用CSS创建新标签元素，这个新标签元素在HTML文档结构中不显示，但新标签元素又是一个行内元素，所以称为其伪元素。这一类元素选择器就称为伪元素选择器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

作用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

简化HTML结构。精简代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

element::before{ content: ''; }

content属性是必备属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

代码练习文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

统一HTML结构文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

<div>和</div>

添加基础样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

div {
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

添加'::before'：在元素内部的前面插入内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

div::before {
  content: '::before';
}

添加'::after'：在元素内部的后面插入内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

div::after {
  content: '::after';
}

用途

1.清除浮动样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

之前学习清除浮动样式有四种方式，分别是：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

• 额外标签法，又称隔墙法；
• 给浮动子元素的父级元素添加overflow属性；
• 父级元素添加after伪元素；
• 父级元素添加双伪元素。

上两种方法在此不多赘述，主要分析后两种添加伪元素的方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

父级元素添加after伪元素：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

.clearfix:after {
  content:"";   /* 该属性是伪元素标签必备属性 */
  display: block;     /* 伪元素本身是行内元素，该属性是将伪元素标签转换为块级元素 */
  height: 0;    /* 该属性是为了不显示伪元素 */
  clear: both;  /* 该属性是清除浮动的本质代码 */
  visibility: hidden;    /* 该属性是为了不显示伪元素 */
}

父级元素添加双伪元素：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

.clearfix:before,
.clearfix:after {
  content: "";    /* 该属性是伪元素标签必备属性 */
  display: table;    /* 该属性是为了使新创建的元素转换为块级元素且在一行显示 */
}
.clearfix:after {
  clear: both; 
}

2.字体图标的使用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

HTML结构文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

<div></div>

添加基本样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

div {
  width: 200px;
  height: 35px;
  border: 1px solid black;
  position: relative;
}

在字体图标网站下载图标之后，引入默认字体图标样式并修改字体图标文件路径。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

/* 引用字体图标样式 */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?j7zncs');
  src: url('../fonts/icomoon.eot');
  src:  url('../fonts/icomoon.eot?j7zncs#iefix') format('embedded-opentype'),
  url('../fonts/icomoon.ttf?j7zncs') format('truetype'),
  url('../fonts/icomoon.woff?j7zncs') format('woff'),
  url('../fonts/icomoon.svg?j7zncs#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

添加字体图标并设置其样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47187.html

div::after {
  font-family: 'icomoon';
  /*  content: '';*/
  /* 需要将字体图标代码进行转义 */
  content: 'ea43';
  position: absolute;
  top: 8px;
  right: 5px;
  color: red;
}