CSS伪元素before和after

2023-07-20 09:57:40

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

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

  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>

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

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

  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

码农公寓

说明

简单例子

设置伪元素样式

应用

1.给图片添加阴影

2. 叠加图片

有趣的hover效果

1. 有趣的curl hover效果

2.有趣的bubble hover效果

相关文章