css系列之before或after中content

2019年9月13日 72次阅读 来源: zhouzhou

**单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素，不过浏览器需要同时支持旧的已经存在的伪元素写法，
比如:first-line、:first-letter、:before、:after等，单冒号(:)兼容性更好**

content可能的值

div::after{
    content: "普通字符串";
    content: attr(父元素的html属性名称);
    content: url(图片、音频、视频等资源的url);
    
    /* 使用unicode字符集，采用4位16进制编码，但不同的浏览器显示存在差异，而且移动端识别度更差*/
    content: "\21e0";
    
    /* content的多个值可以任意组合，各部分通过空格分隔 */
    content: "'" attr(title) "'";
    
    /* 自增计数器，用于插入数字/字母/罗马数字编号 */
    content: counter(<identifier>, <list-style-type>);
    
    /* 以父附属元素的qutoes值作为content的值*/
    content: open-quote | close-quote | no-open-quote | no-close-quote;
}

插入纯文字

content:”string”，或content:none不插入内容

h1::after{
    content:"h1后插入内容"
}
h2::after{
    content:none
}

字符集

<p class="phoneNumber">13900001390</p>

.phoneNumber::before{
    content:'\260E';
    font-size: 16px;
}

《css系列之before或after中content》

插入图片

content属性也可以直接在元素前/后插入图片

h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

插入元素的属性值

content属性可以直接利用attr获取元素的属性，将其插入到对应位置。

<a href="http:///www.ido321.com">这是链接&nbsp;&nbsp;</a>

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

计数器

counter 调用计数器，可以不使用列表元素实现序号功能。
counter 要配合 counter-increment 和 counter-reset属性使用。

content: counter(<identifier>, <list-style-type>);

<list-style-type>: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha
  • counter-reset: [<identifier> <integer>?]，给同级元素增加计数器
    用于标识自增计数器的作用范围，<identifier>为自定义名称，<integer>为起始编号默认为0。
  • counter-increment: [<identifier> <integer>?]，增加计数器的值
    用于标识计数器与实际关联的范围，<identifier>为counter-reset中的自定义名称，<integer>为步长默认为1。
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>

h1::before{
    content:counter(h1)'.';
}
h1{
    counter-increment:h1;
    counter-reset:h2;
}
h2::before{
    content:counter(h1) '-' counter(h2);
}
h2{
    counter-increment:h2;
    counter-reset:h3;
    margin-left:40px;
}
h3::before{
    content:counter(h1) '-' counter(h2) '-' counter(h3);
}
h3{
    counter-increment:h3;
    margin-left:80px;
}

《css系列之before或after中content》

qutoes

<h1>大标题</h1>

h1{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}

《css系列之before或after中content》

<h2>中标题</h2>

h2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

《css系列之before或after中content》

    原文作者：zhouzhou
    原文地址: https://segmentfault.com/a/1190000017874188
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞