CSS content 属性

最新推荐文章于 2024-07-10 09:53:59 发布

my-coco

最新推荐文章于 2024-07-10 09:53:59 发布

阅读量251

点赞数

分类专栏： css 文章标签： css content属性

本文链接：https://blog.csdn.net/weixin_45159207/article/details/90716899

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
所有主流浏览器都支持Content属性。
注意： IE8只有指定!DOCTYPE才支持Content属性。

选择器属性

attr(attribute) 设置Content作为选择器的属性之一
代码：

a:after
{
    content: " (" attr(href) ")";
}

string

可以设置Content你指定的文本。

a:before{ content:“姓名:”;}   
a:after{  content:“\45fe″  }

URI

使用url()可以载入外部资源，主要是一些图标和图片，设置某种媒体（图像，声音，视频等内容）
代码：

p:before{ content:url(/images/img.jpg);  }

注：导入的图片是不能改变宽高的

p:before{   
    content:url(/images/img.jpg);   
    }

引号

open-quote和close-quote
设置Content是开始引号和闭合引号
no-open-quote和no-close-quote移除内容的开始引号和闭合引号

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>引号</title>
    <style>
         q:lang(en) { quotes: '[' ']' "<" ">";}
         q:lang(zh-cn) { quotes: "«" "»" '"' '"';}
    </style>
</head>
<body>
    <p lang="en"><q>WW <q>QQ</q> WW</q></p>
    <p lang="zh-cn"><q>WW <q>QQ</q> WW</q></p>
</body>
</html>

计数器

counter-reset属性创建或重置一个或多个计数器。
counter-reset属性通常是和counter-increment属性，content属性一起使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计数器</title>
<style>
h4:after
{	
    counter-increment:num;
	content:" a" counter(num) "、";
}
li:after 
{
	counter-increment:sub-num;
	content:' a'counter(num) '-Li-' counter(sub-num) '、';
}
</style>
</head>
<body>
<div>
  <h4> 标题 </h4>
  <ul> <li>内容</li> <li>内容</li> </ul>
  <h4> 标题 </h4>
  <ul> <li>内容</li> <li>内容</li></ul>
</div>
</body>
</html>

参考文献菜鸟教程

my-coco

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS content 属性

一、字符串可以添加字符串并且用双引号包住。另外可以使用UTF-8特殊字符（并非UTF-8特殊字符的所有实体都能在所有的浏览器中正确地显示。目前，IE 11 是唯一一个能正确显示所有 HTML5 实体的浏览器），以\开头。如下：p:before{ content:“姓名:”;} p:after{ content:“\21E0″ } 一、 URI使用url()可以载入外部资源，...
复制链接

扫一扫

专栏目录