CSS中的::after ::before

原创

wx57c6b1aea90cf 2021-08-04 11:47:53 ©著作权

©著作权归作者所有：来自51CTO博客作者wx57c6b1aea90cf的原创作品，请联系作者获取转载授权，否则将追究法律责任

利用::after和before来清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用::after和before来清除浮动</title>
    <style>
        #box::after,#box::before{
            content:"";
            height:0;
            visibility:hidden;
            display:block;
            clear:both;
        }
        h1{
            width:300px;
            height:300px;
            background-color:#ccc;
            float:left;
        }
        p{
            width:300px;
            height:300px;
            background-color:#f1f1f1;
        }
    </style>
</head>
<body>
    <div id="box">
        <h1>使用clear清除浮动问题</h1>
    </div>
    <p>我是p标签</p>
</body>
</html>

利用::after或::before玩弄Css计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{
            list-style:none;
            /* 初始化CSS计数器 并指定一个名称 我这里指定为count */
            counter-reset:count;
        }
        ul>li{
            /* 让 计数器每次自增 */
            counter-increment:count;
        }
        ul>li::before{
            /* 在页面输出 */
            content:counter(count);
            padding-right:20px;
        }
    </style>
</head>
<body>
    <ul>
        <li>li_1</li>
        <li>li_2</li>
        <li>li_3</li>
        <li>li_4</li>
        <li>li_5</li>
        <li>li_6</li>
    </ul>
</body>
</html>