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

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

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

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

有趣的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 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>

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

Curl Top Left

Curl Top Right

Curl Bottom Right

Curl 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 Right

Bubble Bottom

Bubble Left

Bubble Float Top

Bubble Float Right

Bubble Float Bottom

Bubble Float Left