有关css伪元素before after

最新推荐文章于 2023-03-16 16:42:57 发布

new_abc

最新推荐文章于 2023-03-16 16:42:57 发布

阅读量309

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/new_abc/article/details/89241663

版权

html css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<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>

效果如下

new_abc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关css伪元素before after

<html><head> <style type="text/css"> div:before { content: url(open_live.png); background-color: #ff0000; width: 100px; ...
复制链接

扫一扫

专栏目录