标签：reset class php chap dom zoom attr ring 清除
一、伪元素和伪类是非常相像的两个东西。在实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
:Pseudo-classes
::Pseudo-elements
但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
二、基本用法：
p::after{} img::before{}
这两个伪类下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。
注：img和input没有该属性；
content的内容一般可以为以下四种：
none： 不生成任何值。
attr()： 插入标签属性值。通常和自定义属性data-配合使用，因为传统的其它属性虽然也能存值，但通常不适合存放表达性文字。
<div data-line="1"></div>
url()： 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
string： 插入字符串
counter()：调用计数器，可以不适用列表元素实现序号功能。具体参见counter-increment和counter-reset属性的用法。
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
1.清除浮动
.clearfix {*zoom: 1;} .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; }
2.制作三角
.c-main:before{ content: ‘‘; border-top: 9px solid transparent;/*方框上部分背景颜色为透明*/ border-bottom: 9px solid transparent;/*方框下部分背景为透明*/ border-right: 9px solid #eee;/*箭头背景颜色*/ position: absolute;/*绝对定位1*/ top: 25px;/*距离顶部位置偏移量2*/ left: -9px;/*距离左边位置偏移量3*/ /*123都是控制显示位置的*/ }
.c-main:after{ content: ‘‘; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 7px solid #fbfdfb;/*箭头背景颜色，覆盖前面的#eee颜色，使其颜色与整体颜色一致*/ position: absolute; top: 27px; left: -7px; }
:before/:after与::before/::after的区别 和属性content:值
标签：reset class php chap dom zoom attr ring 清除
原文地址：https://www.cnblogs.com/jiunie/p/11434855.html
