css系列之before或after中content

lieeps 发布于2019-08-30 15:55 / 1029人阅读

摘要：要配合和属性使用。，给同级元素增加计数器用于标识自增计数器的作用范围，为自定义名称，为起始编号默认为。

**单冒号(:)用于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(, );
    
    /* 以父附属元素的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
}

字符集

13900001390

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

插入图片

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

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

插入元素的属性值

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

这是链接  

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

计数器

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

content: counter(, );

: 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: [ ?]，给同级元素增加计数器
用于标识自增计数器的作用范围，为自定义名称，为起始编号默认为0。

counter-increment: [ ?]，增加计数器的值
用于标识计数器与实际关联的范围，为counter-reset中的自定义名称，为步长默认为1。

大标题
中标题
小标题
小标题
中标题
小标题
小标题
大标题
中标题
小标题
小标题
中标题
小标题
小标题

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;
}

qutoes

大标题

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

中标题

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

服务器托管私有云系列之系列之二架构之坑系列 css中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117232.html

前端基础之--css中可被继承和不可被继承的属性

摘要：一无继承性的属性规定元素应该生成的框的类型文本属性垂直文本对齐规定添加到文本的装饰文本阴影效果空白符的处理设置文本的方向盒子模型的属性，，，，，，，，，，，，，，，，，，，，，，，，，背景属性一.无继承性的属性　　1.display：规定元素应该生成的框的类型　　2.文本属性：vertical-align：垂直文本对齐　　　　　　text-decoration：规定添加到文本的装饰　...

LeexMuller 2019-04-23 11:45 评论0 收藏0
css系列之水平垂直居中

摘要：水平居中水平居中没有什么好说的啦，对于行内元素使用对于块级元素使用前提是已经为元素设置了适当的宽度垂直居中单行文本多行文本伪元素行内元素伪元素未知宽高绝对居中绝对定位已知宽高负要考虑兼容性浮动元素垂直居中父元素水平居中水平居中没有什么好说的啦，对于行内元素使用text-align;对于块级元素使用margin: auto（前提是已经为元素设置了适当的 width 宽度）; 垂直居中...

MiracleWong 2019-08-29 13:44 评论0 收藏0
css3之图形绘制

摘要：由于近期的项目中出现了不规则的边框和图形，所以重新温习一下的图形绘制。。。样式绘制的图形比图片的性能要好，体验更佳，关键一点是更加有趣以下几个例子主要是运用了中伪元素等属性来完成的，我们先了解下它们的基本原理。由于近期的项目中出现了不规则的边框和图形，所以重新温习一下CSS3的图形绘制。。。样式绘制的图形比图片的性能要好，体验更佳，关键一点是更加有趣！以下几个例子主要是运用了css3中b...

Null 2019-04-23 13:28 评论0 收藏0
CSS节选——选择器

摘要：，，层叠样式表，请留意层叠概念。为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类。常见伪元素。和伪元素的用法和下特有的，用于在渲染中向元素逻辑上的头部或尾部添加内容。CSS，cascading style sheet，层叠样式表，请留意层叠概念。 css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:targ...

番茄西红柿 2019-04-23 13:42 评论0 收藏0
CSS 打印

摘要：原文链接简介本文主要讲解如何使用控制打印样式。用户代理可以调整文档内容的格式，使其显示在可打印区域。不管是否双面打印，打印总是包含左页和右页分别通过指定。伪类和需要双面打印时，通常需要将左页和右页设置不同的样式如页边距页码位置。原文链接：https://lon.im/post/css-print... 简介 showImg(https://segmentfault.com/img/r...

weapon 2019-08-29 12:55 评论0 收藏0