CSS中的::after ::before - pssp－IT工程師數位筆記本

文章出處

利用::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>