CSS伪元素before和after

今天发现很多国外的网站和框架设计都用到了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 > 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 > 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; }

效果（鼠标放上即可看到效果）：

Today is a wonderful day. Wish you happy~  应用 1.给图片添加阴影

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 >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 >Today is a wonderful day. Wish you happy~</div>

 

效果如下：

 （注意：实际使用时注意将相同的css抽取，div[class*=‘‘]:before, div[class*=‘‘]:after ）

 

2. 叠加图片

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 > <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 ）

 

有趣的hover效果

参考:https://github.com/IanLunn/Hover

1. 有趣的curl 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 > <a href="#" >Curl Top Left</a> <br/> <a href="#" >Curl Top Right</a> <br/> <a href="#" >Curl Bottom Right</a> <br/> <a href="#" >Curl Bottom Left</a> </div>

 

效果如下：（鼠标放上可看到效果：）

Curl Top Left Curl Top RightCurl Bottom RightCurl Bottom Left

 

 

 2.有趣的bubble hover效果

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; }

 

效果如下：（鼠标放上可看到效果）

 

Bubble Top Bubble RightBubble BottomBubble LeftBubble Float TopBubble Float RightBubble Float BottomBubble Float Left

 

 

 

CSS伪元素before和after,码迷,mamicode.com

CSS伪元素before和after