在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电脑。
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="//m.sbmmt.com">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属性怎么用的详细内容,更多请关注php中文网其它相关文章!
已抢186899个
抢已抢67408个
抢已抢353503个
抢已抢667986个
抢已抢123301个
抢已抢24990个
抢