最近在项目中用到了::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
两个伪元素的粗浅理解,望各位指正!