css中content属性什么作用，语法是什么
导读：关于“css中content属性什么作用，语法是什么”的知识点有一些人不是很理解，对此小编给大家总结了相关内容，文中的内容简单清晰，易于学习与理解，具有一定的参考学习价值，希望能对大家有所帮助，接下来就跟随小编一起学习一下“css中cont...
关于“css中content属性什么作用，语法是什么”的知识点有一些人不是很理解，对此小编给大家总结了相关内容，文中的内容简单清晰，易于学习与理解，具有一定的参考学习价值，希望能对大家有所帮助，接下来就跟随小编一起学习一下“css中content属性什么作用，语法是什么”吧。在css中，content属性与“:before”以及“:after”伪元素配合使用，用于插入内容，语法为“content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit; ”。
本教程操作环境：windows10系统、CSS3& & HTML5版本、Dell G3电脑。
css中content属性怎么用
content 属性与 :before 及 :after 伪元素配合使用，来插入内容。
语法为：
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;
指定属性值如下：
示例如下：
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>
123/title>
style>
a:after {
content: " (" attr(href) ")";
}
/style>
/head>
body>
p>
a href="http://www.php.cn">
PHP中文网/a>
- 程序员梦开始的地方。/p>
p>
a href="http://www.bilibili.com">
哔哩哔哩弹幕网/a>
- 好用的学习网站。/p>
/body>
/html>
输出结果：
示例如下：
插入当前元素编号(指定种类)
css：
style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
.content{
position: relative;
padding: 10px;
border: 1px solid #666;
margin: 10px;
}
.fill-dom-index2 li{
position: relative;
counter-increment: my2;
}
.fill-dom-index2 li div::before{
/* 第二个参数为list-style-type，可用值见： http://www.w3school.com.cn/cssref/pr_list-style-type.asp*/
content: counter(my2,lower-latin)'- ';
color: #f00;
font-weight: 600;
}
/style>
html:
body>
h1>
5、插入当前元素编号(指定种类)/h1>
div class="content fill-dom-index2">
ul>
li>
div>
我是第1个li标签/div>
/li>
div>
我是li标签中的第1个div标签/div>
li>
div>
我是第2个li标签/div>
/li>
li>
div>
我是第3个li标签/div>
/li>
div>
我是li标签中的第2个div标签/div>
li>
div>
我是第4个li标签/div>
/li>
li>
div>
我是第5个li标签/div>
/li>
/ul>
/div>
/body>
通过以上内容的阐述，相信大家对“css中content属性什么作用，语法是什么”已经有了进一步的了解，更多相关的问题，欢迎关注网络或到官网咨询客服。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css中content属性什么作用，语法是什么
本文地址： https://pptw.com/jishu/652747.html