CSS---使用选择器在页面中插入内容

最新推荐文章于 2022-01-25 22:08:52 发布

gqhp

最新推荐文章于 2022-01-25 22:08:52 发布

阅读量488

点赞数

文章标签： css

本文链接：https://blog.csdn.net/sjpgyy/article/details/106600967

版权

本文介绍了如何利用CSS的before和after伪元素在页面中插入文字、图片和项目编号。通过content属性和counter计数器，可以实现元素前后插入内容、连续编号、自定义编号样式以及嵌套编号等效果。

摘要由CSDN通过智能技术生成

CSS—使用选择器在页面中插入内容

使用before伪元素和after伪元素在页面中插入文字，图像，项目编号等等。

一。插入文字

1.使用选择器插入内容
before选择器在元素前插入内容。
afte选择器在元素后插入内容。
选择器content属性中定义要插入的内容。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用选择器在页面中插入内容</title>
    <style>
        h2:before{
   
            content:"Title";
            color:#fff;
            background:green;
            padding:1px 5px;
            margin-right:10px;
        }
    </style>
</head>
<body>
<h1>使用选择器在页面中插入内容</h1>
<h2>使用选择器在页面中插入内容</h2>
</body>
</html>


 <style>
        h2:after{
   
            content:"Title";
            color:#fff;
            background:green;
            padding:1px 5px;
            margin-right:10px;
        }
    </style>

1-2 排除

最低0.47元/天解锁文章

gqhp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS---使用选择器在页面中插入内容

CSS—使用选择器在页面中插入内容使用before伪元素和after伪元素在页面中插入文字，图像，项目编号等等。一。插入文字1.使用选择器插入内容before选择器在元素前插入内容。afte选择器在元素后插入内容。选择器content属性中定义要插入的内容。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>使用选择器在页面中插入内
复制链接

扫一扫