。。

来源：互联网发布：js 同意协议编辑：程序博客网时间：2024/05/20 01:09

<div id="post_detail">

<div id="topics">
<div class="post">
<h1 class="postTitle">
<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/starof/p/4459991.html">::before和::after伪元素的用法</a>
</h1>
<div class="clear"></div>
<div class="postBody">
<div id="cnblogs_post_body"><h1>一、介绍</h1>
css3为了区分伪类和伪元素，伪元素采用双冒号写法。
常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。
举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下：
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div>
<pre><!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
.phoneNumber::before {
content:'\260E';
font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p></pre>
<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div>
<img src="http://images0.cnblogs.com/blog2015/315302/201508/101728385358643.png" alt="">
Note:这些特殊字符的html，js和css的写法是不同的，具体可查看<a href="http://www.cnblogs.com/starof/p/4718550.html" target="_blank">html特殊字符的html，js，css写法汇总。</a>
<h1>二、content属性</h1>
::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。
content可取以下值。
<h2>1、string</h2>
使用引号包一段字符串，将会向元素内容中添加字符串。如：a:after{content:""}
举例：
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div>
<pre><!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
p::before{
content: "《";
color: blue;
}
p::after{
content: "》";
color: blue;
}
</style>
<p>平凡的世界</p></pre>
<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div>
<img src="http://images0.cnblogs.com/blog2015/315302/201508/110929133328022.png" alt="">
<h2>2、attr()</h2>
通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。
<div class="cnblogs_code">
<pre><style type="text/css">
a::after{
content: "(" attr(href) ")";
}
</style>
<a href="http://www.cnblogs.com/starof">starof</a></pre>
</div>
<img src="http://images0.cnblogs.com/blog2015/315302/201508/110937215201245.png" alt="">
<h2>3、url()/uri()</h2>
用于引用媒体文件。
举例：“百度”前面给出一张图片，后面给出href属性。
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div>
<pre><style>
a::before{
content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
}
a::after{
content:"("attr(href)")";
}
a{
text-decoration: none;
}
</style>
---------------------------
<body>
<a href="http://www.baidu.com">百度</a>
</body> </pre>
<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div>
效果：
<img src="http://images.cnitblog.com/blog2015/315302/201505/041517505323703.png" alt="">
<h2>4、counter()</h2>
调用计数器，可以不使用列表元素实现序号功能。
配合counter-increment和counter-reset属性使用：
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
代码:
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div>
<pre><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>
------------------------------------------------
<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> </pre>
<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div>
效果：
<img src="http://images.cnitblog.com/blog2015/315302/201505/041646256106350.png" alt="">
了解更多可参考：<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters" target="_blank">https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters</a>
<h1>三、使用</h1>
<h2>1、清除浮动</h2>
<a href="http://www.cnblogs.com/starof/p/4608962.html#clearfloat" target="_blank">清除浮动</a>方法有多种，现在最常用的就是下面这种方法，仅需要以下样式即可在元素尾部自动清除浮动
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div>
<pre>.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}</pre>
<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div>
<h2>2、模拟float:center的效果</h2>
float没有center这个取值，但是可以通过伪类来模拟实现。
这个效果实现很有意思，左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。
核心css如下：
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div>
<pre>#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; }</pre>
<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div>
完整代码如下：
<div class="cnblogs_code" onclick="cnblogs_code_show('98b7300f-d1a8-4780-a954-8f8baca37da0')"><img id="code_img_closed_98b7300f-d1a8-4780-a954-8f8baca37da0" class="code_img_closed" src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_98b7300f-d1a8-4780-a954-8f8baca37da0" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('98b7300f-d1a8-4780-a954-8f8baca37da0',event)" src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_98b7300f-d1a8-4780-a954-8f8baca37da0" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Float Both</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 14px/1.8 Georgia, serif;
}
#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; }
</style>
</head>
<body>
<div id="page-wrap">
<img src="img/cat.jpg" id="logo">
<div id="l">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
</div>
<div id="r">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
</div>
</div>
</body>
</html></pre>
</div>
View Code</div>
<img src="http://images0.cnblogs.com/blog2015/315302/201508/111029267074149.png" alt="" width="353" height="219"><img src="http://images0.cnblogs.com/blog2015/315302/201508/111033227399273.png" alt="" width="348" height="214">
出自：<a href="https://css-tricks.com/float-center/" target="_blank">https://css-tricks.com/float-center/</a>
<h2 id="star-six">3、做出各种图形效果</h2>
举例：一个六角星
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div>
<pre><style>
#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>
<body>
<div id="star-six"></div>
</body></pre>
<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div>
#star-six的div是一个正三角行，#star-six::after是一个倒三角形，通过绝对定位，调整其位置即可实现六角星的效果。
<img src="http://images0.cnblogs.com/blog2015/315302/201508/111044162547286.png" alt="">
<a href="https://css-tricks.com/examples/ShapesOfCSS/" target="_blank">点我</a>查看更多。
<h2>4、不使用图片创建小图标</h2>
举例：比如一个电话
很巧妙的应用一个div左border加圆角当机身，::before和::after配合圆角当听筒。
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div>
<pre><style type="text/css">
#phone{width:50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;}
#phone:before{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}
#phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;}
</style>
<div id="wraper">
<div id="phone"></div>
</div></pre>
<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div>
<img src="http://images0.cnblogs.com/blog2015/315302/201508/111116453175937.png" alt="">
更多图标：
<div class="cnblogs_code" onclick="cnblogs_code_show('da07e22f-469f-411f-864e-f8050e276291')"><img id="code_img_closed_da07e22f-469f-411f-864e-f8050e276291" class="code_img_closed" src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_da07e22f-469f-411f-864e-f8050e276291" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('da07e22f-469f-411f-864e-f8050e276291',event)" src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_da07e22f-469f-411f-864e-f8050e276291" class="cnblogs_code_hide">
<pre><!doctype html>
<html>
<head>
<title>伪类标签使用</title>
</head>
<style type="text/css">
#wraper{padding:10px;width:380px;height:380px;border:3px solid #ccc;margin:auto;}
#power{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position: relative;display: inline-block;}
#power:before{width:7px;height:22px;background:#EEB422;position: absolute;left:8px;top:-13px;content: "";border: 3px solid #fff;}
#play{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
#play:before{border:11px solid transparent;border-left:17px solid #fff;content: "";position: absolute;left:9px;top: 3px;}
#pause{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
#pause:before{height:20px;width:5px;border:0px solid transparent;border-left:8px solid #fff;border-right:8px solid #fff;content: "";position: absolute;left:4px;top: 5px;}
#stop{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
#stop:before{height:17px;width:17px;background:#fff;content: "";position: absolute;left:6px;top: 6px;}
#comment{width: 50px;height: 25px;margin:20px;border: 6px solid #EEB422;border-radius: 20%;position:relative;display: inline-block;background: #EEB422;}
#comment:before{border:10px solid transparent;border-top:10px solid #EEB422;content: "";position: absolute;left:28px;top: 28px;}
#comment:after{content: "....";position: absolute;color: #fff;font-size: 26px;top: -10px;left: 2px;}
#like{width: 50px;height: 30px;margin:20px;border-radius: 55%;transform:rotate(55deg);-webkit-transform:rotate(55deg);position:relative;display: inline-block;background: #EEB422;}
#like:before{width:50px;height:30px;border-radius: 55%;transform:rotate(-110deg);-webkit-transform:rotate(-110deg);background:#EEB422;content: "";position: absolute;left:8px;top: -12px;}
#search{width: 20px;height: 20px;border:4px solid #EEB422;border-radius:50%;margin:20px;position:relative;display: inline-block;top: -5px;left: -5px;}
#search:before{width:20px;height:5px;background:#EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:15px;top: 22px;}
#home{width: 30px;height: 30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
#home:before{width:6px;height:12px;background:#fff;content: "";position: absolute;left:12px;top: 20px;}
#home:after{border:25px solid transparent;border-bottom:20px solid #EEB422;content: "";position: absolute;top: -38px;left:-10px;}
#photo{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
#photo:before{width:13px;height:13px;border:4px solid #fff;border-radius:50%;background:#EEB422;content: "";position: absolute;left:10px;top: 5px;}
#photo:after{width:15px;height:10px;background:#EEB422;content: "";position: absolute;top: -7px;left:13px;}
#photo{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
#email{width:50px;height:35px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
#email:before{border:25px solid transparent;border-top:20px solid #fff;content: "";position: absolute;left:0px;top: 2px;}
#email:after{border:25px solid transparent;border-top:20px solid #EEB422;content: "";position: absolute;top:0px;}
#file{width:30px;height:45px;border:4px solid #EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
#file:before{border:10px solid #fff;border-right:10px solid #EEB422;border-bottom:10px solid #EEB422;content: "";position: absolute;left:-4px;top: -4px;}
#file:after{width:20px;height:5px;border-top:3px solid #EEB422;border-bottom:3px solid #EEB422;content: "";position: absolute;left: 5px;top: 25px;}
#history{width:35px;height:35px;border:4px solid #EEB422;border-radius: 50%;margin:20px;position:relative;display: inline-block;top: 5px;}
#history:before{width:14px;height:14px;border-bottom:4px solid #EEB422;border-left:4px solid #EEB422;content: "";position: absolute;left:14px;top: 3px;}
#video{width:50px;height:35px;background:#EEB422;border-radius: 20%;margin:20px;position:relative;display: inline-block;top: -5px;}
#video:before{width:6px;height:6px;border:11px solid transparent;border-right:11px solid #EEB422;content: "";position: absolute;left:35px;top: 4px;}
#video:after{width:10px;height:10px;border:6px solid transparent;border-top:6px solid #EEB422;border-left:6px solid #EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:13px;top: 35px;}
#tags{width:50px;height:25px;background:#EEB422;border-radius: 35% 0% 0% 35%;transform:rotate(45deg);-webkit-transform:rotate(45deg);margin:20px;margin-left:35px;position:relative;display: inline-block;top: -5px;}
#tags:before{width:10px;height:10px;border-radius:50%;background:#fff;content: "";position: absolute;left:7px;top: 7px;}
#phone{width:50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;}
#phone:before{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}
#phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;}
#profile{width: 40px;height:15px;background:#EEB422;border-radius: 45% 45% 0 0;margin:20px;position:relative;display: inline-block;top: 0px;}
#profile:before{width: 20px;height:22px;background:#EEB422;border-radius:40%;content: "";position: absolute;left: 10px;top: -22px;}
</style>
<body>
<div id="wraper">
<div id="power"></div>
<div id="play"></div>
<div id="pause"></div>
<div id="stop"></div>
<div id="comment"></div>
<div id="like"></div>
<div id="search"></div>
<div id="home"></div>
<div id="photo"></div>
<div id="email"></div>
<div id="file"></div>
<div id="history"></div>
<div id="video"></div>
<div id="tags"></div>
<div id="phone"></div>
<div id="profile"></div>
</div>
</body>
</html></pre>
</div>
View Code</div>
<img src="http://images0.cnblogs.com/blog2015/315302/201508/111126032237893.png" alt="">
这个效果来自：<a href="http://www.w3cfuns.com/blog-5444604-5402127.html" target="_blank">http://www.w3cfuns.com/blog-5444604-5402127.html</a>
有大神用伪元素创建了84种小图标，具体可查看<a href="http://nicolasgallagher.com/pure-css-gui-icons/" target="_blank">http://nicolasgallagher.com/pure-css-gui-icons/</a>
<h2>5、显示打印网页的URL</h2>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div>
<pre><style>
@media print {
a[href]:after {
content: " (" attr(href) ") ";
}
}
</style><body>
<a href="http://www.baidu.com">百度</a>
</body> </pre>
<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div>
<img src="http://images.cnitblog.com/blog2015/315302/201505/041721073927186.png" alt="">
<h2>6、给blockquote添加引号</h2>
经常用到给blockquote 引用段添加巨大的引号作为背景，可以用：:before 来代替 background 。好处是即可以给背景留下空间，还可以直接使用文字而非图片：
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div>
<pre><meta charset="utf-8"/>
<style type="text/css">
blockquote::before {
content: open-quote;
color: #ddd;
z-index: -1;
font-size:80px;
}
</style>
<blockquote>引用一个段落,双引号用::before伪元素实现</blockquote></pre>
<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div>
<img src="http://images0.cnblogs.com/blog2015/315302/201508/111141231299523.png" alt="">
<h2>7、超链接特效</h2>
举例：配合 CSS定位实现一个鼠标移上去，超链接出现方括号的效果
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div>
<pre><meta charset="utf-8" />
<style type="text/css">
body{
background-color: #425a6c;
}
a {
position: relative;
display: inline-block;
outline: none;
color: #fff;
text-decoration: none;
font-size: 32px;
padding: 5px 20px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -10px; }
a:hover::after { content: "\5D"; right: -10px; }
</style>
<a>鼠标移上去出现方括号</a></pre>
<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div>
<img src="http://images0.cnblogs.com/blog2015/315302/201508/111326598647483.png" alt="">
更多创意链接特效可参考： <a title="Creative Link Effects" href="http://tympanus.net/Development/CreativeLinkEffects/" target="_blank">Creative Link Effects</a> 。
<h2>8、::before和::after实现多背景图片</h2>
举例：一个标签应用5张背景图
<div class="cnblogs_code" onclick="cnblogs_code_show('fa8fba3b-5e85-43fa-84b4-361920f93347')"><img id="code_img_closed_fa8fba3b-5e85-43fa-84b4-361920f93347" class="code_img_closed" src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_fa8fba3b-5e85-43fa-84b4-361920f93347" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('fa8fba3b-5e85-43fa-84b4-361920f93347',event)" src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_fa8fba3b-5e85-43fa-84b4-361920f93347" class="cnblogs_code_hide">
<pre><meta charset="utf-8" />
<style type="text/css">
#silverback {
position: relative;
z-index: 1;
min-width: 200px;
min-height: 200px;
padding: 120px 200px 50px;
background: #d3ff99 url(img/vines-back.png) -10% 0 repeat-x;
}
#silverback:before, #silverback:after {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 100px;
}
#silverback:before {
content: url(img/gorilla-1.png);
padding-left: 3%;
text-align: left;
background: transparent url(img/vines-mid.png) 300% 0 repeat-x;
}
#silverback:after {
content: url(img/gorilla-2.png);
padding-right: 3%;
text-align: right;
background: transparent url(img/vines-front.png) 70% 0 repeat-x;
}
</style>
<div id="silverback">一个标签应用了5张背景图片</div></pre>
</div>
View Code</div>
<img src="http://images0.cnblogs.com/blog2015/315302/201508/111409393792336.png" alt="" width="487" height="275">
原效果来自：<a href="http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/" target="_blank">Multiple Backgrounds and Borders with CSS 2.1</a>
这个效果看的真的是脑洞大开，虽然多背景图用css3的<a href="http://www.cnblogs.com/starof/p/4545033.html" target="_blank">background-image</a>很容易就能实现。但是这篇文章是10年写的，已经过去5年了，想想也正是他们这样的尝试和努力才加速了css3标准的制定，让今天的开发更easy。今天的我们又能为5年后的开发人员做些什么贡献呢？
 
本文作者<a href="http://www.cnblogs.com/starof/" target="_blank">starof</a>,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：<a href="http://www.cnblogs.com/starof/p/4459991.html">http://www.cnblogs.com/starof/p/4459991.html</a>有问题欢迎与我讨论，共同进步。
 </div><div id="MySignature" style="display: block;">如果觉得本文对您有帮助或者您心情好~可以支付宝(左)或微信(中)支持一下：
 
看到小伙伴打赏时给我写一些鼓励的话，真的非常感动，谢谢你们。
 
我开了个微信公众号（第三个二维码）用来分享自己的职场英语相关学习经验，感兴趣可以关注，我会不断更新～ 
<div class="pay_img"><img class="alipay" src="http://files.cnblogs.com/files/starof/starof_zfb.bmp" alt="支付宝打赏"><img src="http://files.cnblogs.com/files/starof/starof_wx.bmp" alt="微信打赏"><img src="https://files.cnblogs.com/files/starof/starof_gzh.bmp" alt="微信公众号"></div> </div>
<div class="clear"></div>
<div id="blog_post_info_block">
<div id="BlogPostCategory">分类: <a href="http://www.cnblogs.com/starof/category/617762.html" target="_blank">html+css</a>,<a href="http://www.cnblogs.com/starof/category/692050.html" target="_blank">html5+css3</a></div>
<div id="EntryTag">标签: <a href="http://www.cnblogs.com/starof/tag/%3A%3Abefore/">::before</a>, <a href="http://www.cnblogs.com/starof/tag/%3A%3Aafter/">::after</a></div>
<div id="blog_post_info"><div id="green_channel">
<a href="javascript:void(0);" id="green_channel_digg" onclick="DiggIt(4459991,cb_blogId,1);green_channel_success(this,'谢谢推荐！');">好文要顶</a>
<a id="green_channel_follow" onclick="follow('baefb75f-c6ad-e011-8673-842b2b196315');" href="javascript:void(0);">关注我</a>
<a id="green_channel_favorite" onclick="AddToWz(cb_entryId);return false;" href="javascript:void(0);">收藏该文</a>
<a id="green_channel_weibo" href="javascript:void(0);" title="分享至新浪微博" onclick="ShareToTsina()"><img src="//common.cnblogs.com/images/icon_weibo_24.png" alt=""></a>
<a id="green_channel_wechat" href="javascript:void(0);" title="分享至微信" onclick="shareOnWechat()"><img src="//common.cnblogs.com/images/wechat.png" alt=""></a>
</div>
<div id="author_profile">
<div id="author_profile_info" class="author_profile_info">
<a href="http://home.cnblogs.com/u/starof/" target="_blank"><img src="//pic.cnblogs.com/face/315302/20170427224142.png" class="author_avatar" alt=""></a>
<div id="author_profile_detail" class="author_profile_info">
<a href="http://home.cnblogs.com/u/starof/">starof</a> 
<a href="http://home.cnblogs.com/u/starof/followees">关注 - 56</a> 
<a href="http://home.cnblogs.com/u/starof/followers">粉丝 - 490</a>
</div>
</div>
<div class="clear"></div>
<div id="author_profile_honor"></div>
<div id="author_profile_follow">
<a href="javascript:void(0);" onclick="follow('baefb75f-c6ad-e011-8673-842b2b196315');return false;">+加关注</a>
</div>
</div>
<div id="div_digg">
<div class="diggit" onclick="votePost(4459991,'Digg')">
12
</div>
<div class="buryit" onclick="votePost(4459991,'Bury')">
0
</div>
<div class="clear"></div>
<div class="diggword" id="digg_tips">
</div>
</div>
</div>
<div class="clear"></div>
<div id="post_next_prev"><a href="http://www.cnblogs.com/starof/p/4574196.html" class="p_n_p_prefix">« </a> 上一篇：<a href="http://www.cnblogs.com/starof/p/4574196.html" title="发布于2015-08-10 22:08">css3 选择器（二）</a> <a href="http://www.cnblogs.com/starof/p/4717826.html" class="p_n_p_prefix">» </a> 下一篇：<a href="http://www.cnblogs.com/starof/p/4717826.html" title="发布于2015-08-11 20:41">css3 选择器（三）</a> </div>
</div>

</div>
<div class="postDesc">posted @ 2015-08-11 14:39 <a href="http://www.cnblogs.com/starof/">starof</a> 阅读(6621) 评论(4) <a href="https://i.cnblogs.com/EditPosts.aspx?postid=4459991" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(4459991);return false;">收藏</a></div>
</div>
<script type="text/javascript">var allowComments=true,cb_blogId=199625,cb_entryId=4459991,cb_blogApp=currentBlogApp,cb_blogUserGuid='baefb75f-c6ad-e011-8673-842b2b196315',cb_entryCreatedDate='2015/8/11 14:39:00';loadViewCount(cb_entryId);</script>

</div>
</div>

阅读全文

0 0