:after和:before用法
2017-03-01 17:48
323 查看
一、介绍：
层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。
伪类和伪元素：
w3c上对伪类和为元素的定义分别为:
伪类：伪类用于向某些选择器添加特殊的效果。
伪元素：伪元素用于将特殊的效果添加到某些选择器
css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
常见的伪类（pseudo-classes）和伪元素（pseudo-elements）
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- ::before和::after伪元素的用法
- :after和:before炫酷用法总结
- css中伪元素before或after中content的特殊用法attr
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- css伪元素:before和:after用法详解
- before和after的用法
- jquery append appendTo before after insertAfter insertBefore prepend prependTo用法区别
- ::before和::after伪元素的用法
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- ::before和::after伪元素的用法
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- CSS伪元素before、after用法 给图片四角加边框
- 关于:after和:before伪类的用法，以及让浮动占据高度问题。
- 借Vue-iview样式修改，熟悉:before和:after伪类的用法
- CSS伪元素--:after-:before的炫酷用法
- css中伪元素before或after中content的特殊用法attr
- css before after基本用法【转】
- CSS3中:before和:after的用法
- css伪元素:before和:after用法详解