CSS3 ::before和::after伪元素的实际应用

实例

1.清除浮动

通常我们清除清除浮动的方式就是在浮动元素后面添加一个空的Div标签，然后在设置它的清除浮动要是，使用after伪元素，我们就不需要添加无意义的div标签在html中了，下面的例子就使用了伪元素清除浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
  <style type="text/css">
      ul {
          margin: 200px;
          background: #ccc;
          padding: 10px;
          border: 1px solid #999;
          list-style:none;
      }
      ul::after {
          clear: both;
          content: '';
          display: block;
      }
      li {
          float: left;
          margin-left: 10px;
      }
      li::after {
          content: '/';
          margin-left: 10px;
      }
      li:last-child::after{
          content: none;
      }
  </style>
</head>
<body>
<ul>
    <li>篮球</li>
    <li>网球</li>
    <li>棒球</li>
</ul>
</body>

</html>

效果：

CSS3 ::before和::after伪元素的实际应用

没有清除浮动：

CSS3 ::before和::after伪元素的实际应用

2.常见消息框

注意，此时伪类content:' ',而非content:'',而且伪类4条边必须宽度相同，而且其他三条边为transparent才可以;对于-webkit-transform设置在之前的文章中已经讲过，可以通过设置定位元素left,top值为50%,translate(-50%,-50%) 来使任意宽高的元素居中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
  <style type="text/css">
      div{
          width:300px;
          background-color:rgba(0,0,0,0.7);
          color:#fff;
          font-family:'Microsoft YaHei';
          text-align:center;
          padding:5px;
          margin:100px auto;
          position:relative;
           }
      div::before{
          content:' ';
          width:0px;
          height:0px;
          position:absolute;
          left:-12px;
          top:50%;
          -webkit-transform:translate(0px,-50%);
          border:6px solid rgba(0,0,0,0.7);
          border-color:transparent rgba(0,0,0,0.7) transparent transparent
              }

  </style>
</head>
<body>
<div>你好吗我哼好</div>
</body>
</html>

效果：

CSS3 ::before和::after伪元素的实际应用

3..阴影

通过设置before，after不同位置，不同旋转角度，可以实现现在网络很流行的阴影效果，同时要保证伪类的颜色及z-index。有了这种方法我们就可以扩展出各种各样的阴影效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{background-color:#ebebeb}
        div.outer{width:400px;
            height:250px;
            padding:5px;
            margin:100px auto;
            position:relative;
        }
        div.child{
            position:absolute;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            background-color:#fff;
            color:#000;
            line-height:250px;
            font-family:'Microsoft YaHei';
            text-align:center;
            z-index:2
        }
        div.outer::before,div.outer::after{content:'';
            z-index:1;
            width:50%;
            height:3px;
            position:absolute;
            left:10px;
            bottom:7px;
            background-color:transparent;
            box-shadow:5px 5px 10px rgba(0,0,0,0.5);
            -webkit-transform:rotate(-3deg);

        }
        div.outer::after{
            left:auto;
            right:10px;
            -webkit-transform:rotate(3deg)
        }
    </style>

</head>
<body>
<div class='outer'>
    <div class='child '>
        我是内容我是内容我是内容
    </div>

</div>
</body>
</html>

　　效果：

CSS3 ::before和::after伪元素的实际应用

4.做出各种图形效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #star-five {
            margin-top: 60px;
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid blue;
            position: relative;
            transform: rotate(35deg);
        }
        #star-five:before {
            border-bottom: 80px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            position: absolute;
            height: 0;
            width: 0;
            top: -45px;
            left: -65px;
            content: '';
            transform: rotate(-35deg);
        }
        #star-five:after {
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid yellow;
            top: 7px;
            left: -110px;
            position: absolute;
            display: block;
            content: '';
            transform: rotate(-70deg);
        }


    </style>

</head>
<body>
<div id='star-five'></div>
</body>
</html>

效果：

CSS3 ::before和::after伪元素的实际应用

举例：一个六角星

<style>
#star-six {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: relative;
}
#star-six::after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
  position: absolute;
  content: "";
  top: 30px;
  left: -50px;
}
</style>
<body>
<div id="star-six"></div>
</body>

View Code