css3之使用选择器在页面中插入内容

最新推荐文章于 2021-06-04 07:55:44 发布

打不死滴小强

最新推荐文章于 2021-06-04 07:55:44 发布

阅读量636

点赞数 1

分类专栏： html5/css相关文章标签： css3 选择器使用选择器在页面中插入内容

本文链接：https://blog.csdn.net/u012859748/article/details/52634345

版权

html5/css相关专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1、使用选择器插入文字内容
在CSS3中，使用before选择器在元素前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容。
例如对H2使用before选择器在H2的前面插入文字“Title”等。
<style type="text/css">

h2:before

{

content:"Title";
}

</style>
还可以使用content属性追加一个none属性值来排除一些不需要插入内容的元素。
如：
<style type="text/css">
h2.nocontent:before{
content:none;
}
</style>
例如：

<!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;
        }
        h2.nocontent:before{
            content: none;
        }
    </style>
</head>
<body>
<h1>使用选择器插入内容</h1>
<h2>使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
<h2 class="nocontent">使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
</body>
</html>

2、使用选择器插入图片文件
使用before或者after除了可以在元素前后插入文字之外还可以插入图片。
在插入图片是需要使用URL指定图片的路径，比如在标题前插入一张图片！
如：
<style type="text/css">
h2:before{
content:url(1.gif);
}
</style>
例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>插入图片</title>
    <style>
        /*h2:after{*/
        /*content: url(hot.gif);*/
        /*}*/
        h2.hot:after{
            content: url(hot.gif);
        }
        h2.digest:after{
            content: url(digest.gif);
        }
        h2.xinren:after{
            content: url(xinren.gif);
        }
    </style>
</head>
<body>
<h1>插入图片</h1>
<h2 class="hot">这是最近很火的帖子</h2>
<h2 class="digest">精心为您挑选的帖子</h2>
<h2 class="hot">这是最近很火的帖子</h2>
<h2 class="hot">这是最近很火的帖子</h2>
<h2 class="xinren">新人报道</h2>
<h2 class="hot">这是最近很火的帖子</h2>
<h2>插入图片文件</h2>
</body>
</html>

效果;

3、使用选择器插入项目编号

可以在多个标题前加上连续编号、在标题/项目编号中追加文字等等。

还可以使用content属性的open-quote属性值与close-quote属性值在字符串的两边添加诸如小括号、单引号、双引号之类的文字字符。如

<style> 
h1:before{
 content:open-quote; 这里open-quote是开始符号
}
h1:after{
 content:close-quote; 这里close-quote是结束符号
}
h1{
quote:"(" ")";   这里quote字符类型（使用双引号（""）的时候需要使用转义字符“\”）
}
</style> 
<h1>标题</h1>

打不死滴小强

关注

1
点赞
踩
1

收藏

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

1、使用选择器插入文字内容在CSS3中，使用before选择器在元素前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容。例如对H2使用before选择器在H2的前面插入文字“Title”等。 h2:before{ content:"Title"; } 还可以使用content属性追加一个none属性值
复制链接

扫一扫

专栏目录