利用伪元素加入新内容

在元素前:加入一个小方块,后:加入“----后”

<!DOCTYPE html>
<html>
<head>
    <style>
        p::before
        {
            content:"";
            width: 12px;
            height: 12px;
            background-color: pink;
            display: inline-block;
        }
        p::after
        {
            content:"--------后";
        }
    </style>
</head>

<body>

<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>

</body>
</html>

效果图如下:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/wytraining/article/details/101296637
今日推荐