标签：com class blog http code div img java style size javascript
今天发现很多国外的网站和框架设计都用到了before和after，之前使用的比较少，今天试了下觉得还是很有意思的~
1. :before 和 :after将在内容元素的前后插入额外的元素；:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性。
2. :before 和 :after发布于CSS2.1, 在css3中修订后伪元素使用::,伪类使用:, 因而形式为:: before, ::after
3. 无论使用单引号还是双引号浏览器都能识别，但是IE8只支持单冒号格式，因而为兼容还是使用单冒号
.div1:before{ content:open-quote; } .div1:after{ content:close-quote; }
<div class="div1"> Today is a wonderful day. Wish you happy~</div>
结果：
“ Today is a wonderful day. Wish you happy~”
eg1：
.div1{ width:500px; height:200px; margin:100px auto; background-color:#F0F0F0; line-height:200px; text-align:center; } .div1:before{ content:open-quote; position:relative; font-size: 24pt; line-height:200px; text-align:center; color:#fff; background:#ddd; border-radius:25px; } .div1:after{ content:close-quote; position:relative; font-size: 24pt; background:#ddd; border-radius:25px; line-height:200px; text-align:center; color:#fff; }
<div class="div1"> Today is a wonderful day. Wish you happy~</div>
结果：
注意：实际使用时注意将相同的css抽取，div[class*=‘‘]:before, div[class*=‘‘]:after
eg2：（与伪类结合使用）
添加样式：
.div1:hover:after,.div1:hover:before { background-color: #555; }
效果（鼠标放上即可看到效果）：
eg1:
css如下：
.div { width: 500px; height: 200px; margin: 100px auto; background-color: #F0F0F0; line-height: 200px; text-align: center; } .effect { position: relative; } .effect:hover:before { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); transform:rotate(-3deg); }
<div class="div effect">Today is a wonderful day. Wish you happy~</div>
效果如下：
eg2:
在eg1的基础上添加after
.div2 { width: 500px; height: 200px; margin: 100px auto; background-color: #F0F0F0; line-height: 200px; text-align: center; } .effect1 { position: relative; } .effect1:hover:before { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } .effect1:hover:after { z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); transform: rotate(3deg); }
<div class="div2 effect1">Today is a wonderful day. Wish you happy~</div>
效果如下：
（注意：实际使用时注意将相同的css抽取，div[class*=‘‘]:before,
div[class*=‘‘]:after ）
1）未叠加时如下：
* {margin: 0; padding: 0;} body {background: #ccd3d7;} .imageshow{ border: 6px solid #fff; float:left; height:267px; width:400px; margin:50px; position: relative; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0.3); box-shadow: 2px 2px 5px rgba(0,0,0.3); }
<div class="imageshow"> <img src="images/demo.png"> </div>
2）添加before伪元素
.imageshow:before { content: ""; height: 400px; width: 267px; background: #eff4de; border: 6px solid #fff; position: absolute; z-index: -1; top: 0px; left: -10px; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
效果如下：
3）加上after
.imageshow:after { content: ""; height:267px; width:400px; background: #eff4de; border: 6px solid #fff; position: absolute; z-index: -1; top: 5px; left: 0px; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-transform: rotate(4deg); transform: rotate(4deg); }
效果如下：
（ 注意：实际使用时注意将相同的css抽取，div[class*=‘‘]:before,
div[class*=‘‘]:after ）
参考:https://github.com/IanLunn/Hover
左上curl css如下；
.button { margin:10px; padding: 0.5em; cursor: pointer; background: #BCA9F5; text-decoration: none; color: #666666; border-radius:10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* Curl Top Left */ .curl-top-left { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .curl-top-left:before { pointer-events: none; position: absolute; content: ‘‘; height: 0; width: 0; top: 0; left: 0; background: white; /* IE9 */ background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=‘#ffffff‘, endColorstr=‘#000000‘); /*For IE7-8-9*/ z-index: 1000; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .curl-top-left:hover:before, .curl-top-left:focus:before, .curl-top-left:active:before { width: 25px; height: 25px; }
<div class="div5"> <a href="#" class="button curl-top-left">Curl Top Left</a> <br/> <a href="#" class="button curl-top-right">Curl Top Right</a> <br/> <a href="#" class="button curl-bottom-right">Curl Bottom Right</a> <br/> <a href="#" class="button curl-bottom-left">Curl Bottom Left</a> </div>
效果如下：（鼠标放上可看到效果：）
bubble top css如下：
.button { margin:10px; padding: 1em; cursor: pointer; background: #BCA9F5; text-decoration: none; color: #666666; border-radius:10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* SPEECH BUBBLES */ /* Bubble Top */ .bubble-top { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-top:before { pointer-events: none; position: absolute; z-index: -1; content: ‘‘; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top; transition-property: top; left: calc(50% - 10px); top: 0; border-width: 0 10px 10px 10px; border-color: transparent transparent #BCA9F5 transparent; } .bubble-top:hover:before, .bubble-top:focus:before, .bubble-top:active:before { top: -10px; }
效果如下：（鼠标放上可看到效果）
CSS伪元素before和after,码迷,mamicode.com
标签：com class blog http code div img java style size javascript
原文地址：http://www.cnblogs.com/wishyouhappy/p/3694721.html
