li{position:relative;float:left;width:80px;list-style:no"/>

使用伪类before和after

Posted Zz喵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用伪类before和after相关的知识,希望对你有一定的参考价值。

  对于伪类before和after的使用,完整地讲是不知道怎么使用,除开最基本对元素前后添加内容之外,可以使用这两个伪类的CSS属性达到令人满意的效果。

  1、添加元素内容:

<!DOCTYPE html>
<html>
    <head>
        <title>添加元素内容</title>
        <meta charset="utf-8" />
        <style>
           p{ padding: 20px;}
           p:before{content: "我是before添加的内容"; font-weight: bold;}
           p:after{content: "我是after添加的内容"; font-style: italic}
        </style>
    </head>
    <body>
    <p>我是元素里面的内容</p>
    </body>
</html>

 

   在这里添加了元素内边距,判断before和after的位置是包含在content之中还是之外,结果如下:

我是元素里面的内容

   可以看到,元素添加的内容实在content之中,并且对于伪类样式的设置,不会影响到元素的样式。

  2、展示列表的hover特效:

<!DOCTYPE html>
<html>
    <head>
        <title>展示边框出现效果</title>
        <meta charset="utf-8" />
        <style>
            .hover>li{
                position: relative;
                float: left;
                width: 80px;
                list-style: none;
                text-align: center;
            }

            .hover>li:before{
                content: "";
                border-bottom: 2px solid #5ac;
                position: absolute;
                top: 20px;
                width: 0;
                left: 50%;
                transition: all linear .5s;
                padding-bottom: 20px;
            }
            .hover>li:hover:before{
                position: absolute;
                width: 100%;
                top: 20px;
                left: 0;
            }
        </style>
    </head>
    <body>
    <ul class="hover">
        <li>01组</li>
        <li>02组</li>
        <li>03组</li>
    </ul>
    </body>
</html>

  上面的代码中,content,top及值,width,padding-bottom,transition都是必不可少的,只要有一点偏差就不能达到想要的效果。结果如下:

  • 01组
  • 02组
  • 03组

 

 

  3、由于这两个伪类属于元素的content部分,所以可以用来对元素进行边框外形的设置:

<!DOCTYPE html>
<html>
    <head>
        <title>设置边框样式</title>
        <meta charset="utf-8" />
        <style>
            .border{
                position: relative;
                width:150px;
                height: 36px;
                border:1px solid black;
                border-radius:5px;
                background: #eee;
                margin-left: 50px;
            }
            .border:before,.border:after{
                content: "";
                display: block;
                position: absolute;
                top:8px;
                width: 0;
                height: 0;
                border:6px solid transparent;
            }
            .border:before{
                left:-11px;
                border-right-color: #eee;
                z-index:1
            }
            .border:after {
                left: -12px;
                border-right-color: black;
                z-index: 0
            }
        </style>
    </head>
    <body>
    <div class="border"></div>
    </body>
</html>

  通过before和after的定位,利用位置差值和颜色差异,将突出的小角展示出来。结果如下:

 

   各种元素和css属性都是神通广大,只需要我们多试验,多发掘!

以上是关于使用伪类before和after的主要内容,如果未能解决你的问题,请参考以下文章

关于伪类元素:before和:after

使用伪类before和after

关于:before和:after伪类的那些事

伪类before和after

认识:before和:after伪类

用伪类添加翘边阴影::before和::after