css-fater伪元素布局

by zhuzhenPosted on

伪元素虽然时虚拟元素，但是也会参与布局，并占用空间。如下图：

再div的content的文字内容，后面紧跟着黄色线条，会占用空间。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #home-headimage.line-yellow {
            background-color: lightblue;
            padding: 10px;
        }

        #home-headimage.line-yellow::after {
            content: "";
            width: 475px;
            height: 6px;
            background-color: #f8bf5d;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="home-headimage" class="line-yellow">
        这是 home-headimage 元素的内容。
    </div>
</body>

</html>