CSS伪元素before和after

时间:2014-04-28 00:17:14   收藏:0   阅读:546

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

mamicode.com,码迷
    .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;
    }
mamicode.com,码迷
    <div class="div1"> Today is a wonderful day. Wish you happy~</div>

结果:

mamicode.com,码迷

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

mamicode.com,码迷
.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);
}
mamicode.com,码迷

 

  <div class="div effect">Today is a wonderful day. Wish you happy~</div>

 

效果如下:

mamicode.com,码迷

 

 

 

 eg2:

在eg1的基础上添加after

mamicode.com,码迷
.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);
}
mamicode.com,码迷

 

        <div class="div2 effect1">Today is a wonderful day. Wish you happy~</div>

 

效果如下:

mamicode.com,码迷

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

 

2. 叠加图片

1)未叠加时如下:

mamicode.com,码迷
* {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);  
}
mamicode.com,码迷

 

 

    <div class="imageshow">
        <img src="images/demo.png">
    </div>

mamicode.com,码迷

 

 2)添加before伪元素

mamicode.com,码迷
.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);
}
mamicode.com,码迷

 

效果如下:

mamicode.com,码迷

 

 

 3)加上after

mamicode.com,码迷
.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);
}
mamicode.com,码迷

 

 

效果如下:

mamicode.com,码迷

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

 

有趣的hover效果

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

1. 有趣的curl hover效果

左上curl css如下;

mamicode.com,码迷
.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;
}
mamicode.com,码迷
mamicode.com,码迷
    <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>
mamicode.com,码迷

 

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

 

 

 2.有趣的bubble hover效果

bubble top css如下:

mamicode.com,码迷
.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;
}
mamicode.com,码迷

 

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

 

 

 

 

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

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!