HTML5基础加强css样式篇（常用伪元素选择器after，before）（十五）

本文链接：https://blog.csdn.net/u010853130/article/details/62417083

注：1伪元素与元素的区别：无法获取文本内容；

2.规范要求使用：：实际使用：（支持IE8）；

3.伪元素和本身元素在同一层级

1.after伪元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*.box::after {*/
        .box:after {
            content: "Hi ";

            font-size: 36px;

            display: block;
        }
        .box{
            border: 1px solid red;
        }

        /*1.伪元素before与元素区别 : 无法获取文本内容*/
        /*2.规范要求使用:: 实际使用: 支持IE8*/
    </style>
</head>
<body>

    <div class="box">
        <span>Hello</span>
    </div>

<script type="text/javascript">



</script>
</body>
</html>

2.before伪元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box::before {
            content: "Hi ";

            font-size: 36px;

            display: block;
        }


        .box{
            border: 1px solid red;
        }
    </style>
</head>
<body>

    <div class="box">
        <span>Hello</span>
    </div>

<script type="text/javascript">



</script>
</body>
</html>

3.before和after的具体使用（解决高度塌陷）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .wrapper{
            background-color: yellow;
        }

        .wrapper:after{
            content: "";
            /*注意：通过伪元素清除浮动，必须设置 display: block*/
            display: block;
            clear: both;
        }

        .box{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }


        /*.clear-fix{*/
            /*clear: both;*/
        /*}*/


    </style>
</head>
<body>

    <div class="wrapper">
        <div class="box"></div>
        <!--<div class="clear-fix"></div>-->
    </div>


<script type="text/javascript">


</script>
</body>
</html>

4.属性元素选择器和伪元素的综合使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }

        [href$=".doc"]:before{
            content: "";
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url("img/icon_doc.png") no-repeat;

            vertical-align: middle;

        }

        [href$=".xls"]:before{
            content: "";
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url("img/icon_xls.png") no-repeat;

            vertical-align: middle;

        }

        [href$=".pdf"]:before{
            content: "";
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url("img/icon_pdf.png") no-repeat;

            vertical-align: middle;

        }

        [href$=".mp3"]:before{
            content: "";
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url("img/icon_mpg.png") no-repeat;

            vertical-align: middle;

        }
        [href$=".html"]:before{
            content: "";
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url("img/icon_xml.png") no-repeat;

            vertical-align: middle;

        }


        span{
            vertical-align: middle;
            margin-left: .5em;
        }

        ul li{
            line-height: 2;
        }

    </style>
</head>
<body>

<ul>
    <li><a href="file/test.doc"><span>世界真其美妙.doc</span></a></li>
    <li><a href="file/test.xls"><span>销售报表.xls</span></a></li>
    <li><a href="file/test.pdf"><span>JS权威指南.pdf</span></a></li>
    <li><a href="file/test.mp3"><span>南山南.mp3</span></a></li>
    <li><a href="file/test.html"><span>test.html</span></a></li>
</ul>


<script type="text/javascript">


</script>
</body>
</html>

效果如下：