一、介绍:
层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。
事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”。
伪类和伪元素:
w3c上对伪类和为元素的定义分别为:
伪类:伪类用于向某些选择器添加特殊的效果。
伪元素:伪元素用于将特殊的效果添加到某些选择器
css3为了区分伪类和伪元素,伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
常见的伪类(pseudo-classes)和伪元素(pseudo-elements)
这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标
伪元素的兼容性
Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
几乎所有的移动浏览器。
二、:after和:before的基本用法
:before 选择器在被选元素的内容前面插入内容。
:after 选择器在被选元素的内容后面插入内容。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本用法</title>
</head>
<body>
<p>两个黄鹂鸣翠柳,一行白鹭上青天</p>
</body>
</html>
此时浏览器效果如下:
当添加以下代码时:
p:before{
content: '作者:杜甫';
color: red;
}
p:after{
content: '出自《绝句》';
color: red;
}
此时页面显示如下:
审查元素会发现:
虽然页面添加了东西,但它并不会出现在dom中,只是起到修饰作用。
content属性
:before和:after必须配合content属性来使用,content用来定义插入的内容,content必须有值,至少是空。默认情况下,伪类元素的display是默认值inline,可以通过设置display:block来改变其显示。
content可取以下值:
1.string
使用引号包一段字符串,将会向元素内容中添加字符串。如:a:after{content:""}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本用法</title>
<style type="text/css">
p:before{
content: '《';
color: red;
}
p:after{
content: '》';
color: red;
}
</style>
</head>
<body>
<p>两个黄鹂鸣翠柳,一行白鹭上青天</p>
</body>
</html>
2.attr();
通过attr()调用当前元素的属性,比如将图片alt提示文字或者链接的href地址显示出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本用法</title>
<style type="text/css">
a:after{
content: '('attr(href)')';
color: red;
}
</style>
</head>
<body>
<a href="http://blog.csdn.net/sinat_32546159">我的博客</a>
</body>
</html>
3.url()/uri()
用于引用媒体文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本用法</title>
<style type="text/css">
a:before{
content: '('url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488386235452&di=c2737c00b34a5e64f804256fe1a00953&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fbaike%2Fs%253D220%2Fsign%3D8306ef31fdfaaf5180e386bdbc5494ed%2F7e3e6709c93d70cf76daed1af8dcd100baa12b80.jpg)')';
}
a:after{
content: '('attr(href)')';
color: red;
}
</style>
</head>
<body>
<a href="http://sports.qq.com/nba/?ptag=baidu.ald.sc.nba">NBA</a>
</body>
</html>
页面如下:
4.counter()
调用计数器,可以不使用列表元素实现序号功能。
配合counter-increment和counter-reset属性使用:
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本用法</title>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1:before {
counter-increment: section;
content: counter(section) "、";
}
h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) "、";
}
</style>
</head>
<body>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>
页面如下:
了解更多可参考:http://https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
三、使用
1.清除浮动
清除浮动方法有多种,现在最常用的就是下面这种方法,仅需要以下样式即可在元素尾部自动清除浮动
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: '.';
display: block;
width: 0;
height: 0;
visibility: hidden;
}
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>after与before</title>
<style type="text/css">
*{margin:0;padding:0;}
.clearfix{
zoom:1;
}
.clearfix:after{
content:'.';
display: block;
width: 0;
height: 0;
clear: both;
visibility: hidden;
}
ul{
background: blue;
}
li{
width: 100px;
height: 100px;
border:1px solid red;
float: left;
}
</style>
</head>
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</body>
</html>
此时页面如下:
因为对父元素ul设置背景色为蓝色但是父元素并未显示,因为li设置了float:left;导致父元素高度塌陷,此时要为父元素清除浮动,只需为ul加上class="clearfix"即可;此时效果图如下:
2.模拟float:center的效果
float没有center这个取值,但是可以通过伪类来模拟实现。
这个效果实现很有意思,左右通过::before float各自留出一半图片的位置,再把图片绝对定位上去。
#page-wrap { width: 60%; margin: 40px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; }
效果如下:
出自: https://css-tricks.com/float-center/?spm=5176.100239.blogcont49793.6.D9PuiN
3.做出各种图形效果
做一个六角星:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>after与before</title>
<style type="text/css">
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six::after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
</head>
<body>
<p id="star-six"></p>
</body>
</html>
如下:
查看更多小图标: 更多小图标制作
4.tooltip文字提示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>after与before</title>
<style type="text/css">
a{
position: relative;
}
a:after{
content: '这是一个超链接';
position: absolute;
transition: all 0.4s ease;
width: 100%;
left: 0;
top: 0;
font-size: 12px;
opacity: 0;
}
a:hover:after{
content: '这是一个超链接';
display: block;
color: red;
top: 20px;
opacity: 1;
}
</style>
</head>
<body>
<a href="#">文字提示效果</a>
</body>
</html>
当鼠标悬停在文字上时,提示文字会缓缓滑出
详见:http://codepen.io/css-tricks/full/wFeaG
5. 炫酷导航效果
具体点击以下链接https://tympanus.net/Development/CreativeLinkEffects/
真的很不错,可以研究下
当然利用伪元素:before和:after还可以做很多东西,再次只总结这么多。
参考:http://www.cnblogs.com/cheerful-queen/p/4971484.html
参考:https://yq.aliyun.com/articles/49793