|
最近上班的时候遇到一个很尴尬的事情，别人之前写的代码有个位置需要改一下，但是却不知道在哪儿来改。。。后来才发现是在css的before中的content里边，那么接下来就将content的用法整理一下：
content属性可以在页面中实现插入内容，一般配合主要的伪类元素使用（before、after、first-letter、first-line）。 1、插入纯文字： <!-- html内容 --> <h1> 这是原本的文字</h1>css内容： h1::before {
content: '这是插入的文字';
}2、插入文字符号： <body>
<div class="div"></div>
</body>css内容：.div { width: 300px; height: 300px; background: #214782; margin: 50px auto; quotes: "(" ")"; } .div::before { content: open-quote; } .div::after { content: close-quote; } 3、插入图片： h1::before { content: url('图片路径') } 4、插入元素属性：content可以直接使用attr获取元素的属性并且插入到对应的位置： 例： a:after { content:attr(href); } 5、插入项目编号（利用content属性的counter属性来进行追加连续编号）： <body> <h1>大标题</h1> <p>文字</p> <h1>大标题</h1> <p>文字</p> <h1>大标题</h1> <p>文字</p> <h1>大标题</h1> <p>文字</p> </body> css内容： h1:before { content: counter(my)'.'; } h1 { counter-increment: my; } |
|
公众号
