有关css伪元素before after_css在button前后设置伪元素-优快云博客

本文深入探讨了CSS伪元素:before与:after的使用技巧，通过实例展示了如何在不同类型的HTML元素前后添加文本或图片，揭示了它们在块级元素与文本元素中的表现差异。

<html>

<head>
    <style type="text/css">
        div:before {
            content: url(open_live.png);
            background-color: #ff0000;
            width: 100px;
            height: 100px;
        }
        
        div::after {
            content: url(open_live.png);
            background-color: #ff0000;
        }
        
        p:before {
            content: "before-";
        }
        
        p::after {
            content: "-after";
        }
        
        button:before {
            content: "before-";
        }
        
        button::after {
            content: "-after";
        }
    </style>
</head>

<body>
    <p style=" background-color: #ff0000;">111111111111111</p>
    <div class="container">
        <p>222222222222222</p>
        <button>ssss</button>
    </div>

</html>

效果:

通过效果我们可以看出,如果是文本内，添加文字的话是直接在标签的前面或后面添加文字

如果是块，则在该块的开始或者结束位置添加子元素。

另外注意如果是在p标签前面添加img这个是没有效果的

但如果是在div标签前面添加文本：

<html>

<head>
    <style type="text/css">
        div:before {
            content: "before";
            background-color: #ff0000;
            width: 100px;
            height: 100px;
        }
        
        div::after {
            content: "after-";
            background-color: #ff0000;
        }
    </style>
</head>

<body>

    <div class="container" style=" background-color: #00ff00;">
        <p>222222222222222</p>
        <button>ssss</button>
    </div>

</html>

效果如下