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：

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

结果：

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如下：

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

效果如下：

mamicode.com,码迷

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>

效果如下：

mamicode.com,码迷

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

mamicode.com,码迷

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

效果如下：

mamicode.com,码迷

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

效果如下：

mamicode.com,码迷

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

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