什么是伪元素？

不会出现在DOM中，不会改变文档内容，仅仅是在CSS渲染时加入，不可复制的元素。

常用伪元素：

::first-letter, ::first-line,::before,::after,::selection

::before 伪元素用于在元素之前添加内容

::after 伪元素用于在元素之后添加内容

重要属性 content

content的值 “” 、字符串、attr() 、url() 、uri() 、counter()等

空值””

扩展背景、清除浮动

.clearFix::after{

clear:both;

content:””;

display:block;

height:0;

overflow:hidden;

}

字符串

.phoneNo::before{

content: ‘\260e’;

font-size: 16px;

}

17788555831

attr() 以及 url()

attr() 可以调用当前元素的某个属性

url() 可以应用媒体文件 (图片)，content 图片不能设置大小可以用 backgroud 代替

a::before{

content: url(“//www.baidu.com/img/flexible/logo/pc/result@2.png”) ;

}

a::after{

content: attr(href);

}

before

counter 计数器

counter 调用计数器，可以不使用列表元素序号功能。

counter 要配合 counter-increment 和counter-reset 属性使用

counter-reset 给同级元素增加计数器 比如一个要么有多个H1元素 ，那就给body加计数器。

一个H1元素里面有多个H2 元素，那就给H1 元素加计数器。

counter-increment 增加计数器值。

body {

counter-reset: section;

}

​

h1 {

counter-reset: subsection;

}

​

h1:before {

counter-increment: section;

content: “Section “counter(section) “. “;

}

​

h2:before {

counter-increment: subsection;

content: counter(section) “.”counter(subsection) ” “;

}

h1

h2

h2 1

h2 2

h2

h2 2

h2 2 1

h2 2 2