css中content属性怎么用
本文讲解"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.yisu.com">亿速云</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> <h2>5、插入当前元素编号(指定种类)</h2> <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属性怎么用" 就介绍到这。希望大家多多支持编程宝库。
本文讲解"css行距百分之150怎么表示",希望能够解决您遇到的有关问题,下面我们来看这篇 "css行距百分之150怎么表示" 文章。在css中,行距百分之150可以利用“元素{line-height:150 ...