最近在项目中用到了::before和::after，之前对其接触不深，用完之后才发现这两个元素的作用真心赞！在这里记录一下这两个伪元素的具体用法吧，希望能帮助到有缘人！~~
介绍这两个伪元素之前，不得不提与其混淆的另一个概念——伪类，伪类由单冒号:和伪类名组成，比如:hover，:first-child等。而伪元素则是一类元素，用于插入内容，它既不受文档约束，也不影响文档本身，只会影响最终的样式。它的写法有两种，一种就是像伪类一样用单冒号:书写，比如:before，:after等，这种写法多见于CSS2的版本，仅用来兼容IE8；但是自从CSS3面世以来，伪元素的写法就变成了双冒号形式，比如这样::before，::after。由于现代浏览器一般都支持双冒号形式，所以我就以::before和::after作为标题了，莫怪莫怪！
content属性
::before和::after两个伪元素拥有一个特有的属性，那就是content，作用是在元素的头部或尾部添加内容，再重申一遍，这些内容并不会出现在文档流中，只不过会在CSS渲染层出现。通过MDN可以知道，content有以下几个比较重要的属性值（还有栗子）：
- [string] 添加一段字符串
// CSS
p::after {
content: 'World';
}
// HTML
<p>Hello</p>
输出：
Hello World
- attr() 调用当前元素的属性，并显示出来
// CSS
a::before {
content: attr(href);
}
// HTML
<a href="http://www.jianshu.com"></a>
输出：
- url() 引用媒体文件，并显示出来 (CSS3试验性的属性)
// CSS
h1::before {
content: url(logo.png);
}
// HTML
<h1>这是logo</h1>
好了，上面介绍了这么多的content的属性值，其实只不过是其最表面的用法，真正的奇技淫巧啊，就要靠大家的脑洞开发出来了。
奇技淫巧一：清除浮动
通常情况下，大家可能在需要清除浮动的地方加入元素<div style="clear:both;"></div>来清除浮动，但是这样的做法不免会添加许多多余的空元素，而且也不利于后期代码的维护工作，但是自从有了::after这个伪元素后，我们就可以用以下代码来清除浮动(简单易用)：
// CSS
// 为了兼容IE6和IE7，触发haslayout
.clearfix { *zoom: 1; }
.clearfix:after {
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
li {
float: left;
}
// HTML
<ul class="box clearfix">
<li>浮块一</li>
<li>浮块二</li>
</ul>
奇技淫巧二：为引用内容添加引号
这个技巧彻底地为大家展示了怎样巧妙的配合 CSS 的特性，达到一个神奇的效果。。。
// CSS
blockquote {
position: relative;
text-align: center;
font-size: 30px;
}
blockquote::before, blockquote::after {
position: absolute;
font-size: 90px;
font-family: serif;
font-weight: bolder;
line-height: 1;
top: 0;
}
blockquote::before {
content: open-quote;
left: 0;
}
blockquote::after {
content: close-quote;
right: 0;
}
// HTML
<blockquote>这是引用的内容！</blockquote>
输出：
引用
奇技淫巧三：添加各种动画效果（以光泽效果为例）
伪元素配合CSS3的动画，效果惊人！！！
// CSS
button {
background: orangered;
color: #fff;
border: none;
padding: 0 25px;
border-radius: 8px;
line-height: 32px;
font-size: 16px;
cursor: pointer;
outline: none;
overflow: hidden;
position: relative;
left: 50%;
top: 50px;
transform: scale(1, 1) translate(-50%, -50%);
transition: all .5s cubic-bezier(0.67, -0.51, 0.42, 1.43);
}
button::after {
content: '';
width: 40px;
height: 200%;
position: absolute;
top: -50%;
left: -50%;
background: linear-gradient(to right, rgba(229, 172, 142, 0), rgba(255,255,255,0.6) 50%, rgba(229, 172, 142, 0));
transform: rotateZ(30deg);
}
button:hover::after, button:focus::after {
animation: sheen 1s forwards .5s;
}
button:hover {
transform: scale(2, 2);
}
@keyframes sheen {
100% {
left: 150%;
}
}
// HTML
<button>闪光效果</button>
输出效果如下：
闪光效果
好啦，以上就是本人最近对
::before和::after两个为元素的粗浅理解，望各位指正！
网友评论