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伪元素before和after

注意:实际使用时注意将相同的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>

效果如下:

CSS伪元素before和after

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伪元素before和after

(注意:实际使用时注意将相同的css抽取,div[class*='']:before, div[class*='']:after )

2. 叠加图片

1)未叠加时如下:

* {margin:; padding:;}
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="data:images/demo.png">
</div>

CSS伪元素before和after

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

效果如下:

CSS伪元素before和after

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伪元素before和after

( 注意:实际使用时注意将相同的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:;
width:;
top:;
left:;
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:;
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>

效果如下:(鼠标放上可看到效果:)

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

效果如下:(鼠标放上可看到效果)


上一篇:PowerDesigner如何把建好的表导入到数据库中,并且把注释也导入进去


下一篇:VLAN报文和非VLAN以太网报文的区别