当前位置: 首页 > Web前端 > CSS

css系列前后的content

时间:2023-03-30 23:08:55 CSS

**单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素,但需要浏览器支持同时存在的旧伪元素,如:first-line,:first-letter,:before,:after等,单冒号(:)更兼容**内容可能取值div::之后{内容:“普通字符串”;content:attr(父元素的html属性名);content:url(图片、音频、视频等资源的url);/*使用unicode字符集,使用4位16进制编码,但不同浏览器显示差异,移动端识别较差*/content:"\21e0";/*content的多个值可以任意组合,每个部分用空格隔开*/content:"'"attr(title)"'";/*自增计数器,用于插入数字/字母/罗马数字*/content:counter(,);/*取父子元素的qutoes值作为content的值*/content:open-quote|关闭引用|无开引号|no-close-quote;}Insertplaintextcontent:"string",orcontent:none不插入内容h1::after{content:"Insertcontentafterh1"}h2::after{content:none}字符集13900001390

.phoneNumber::before{content:'\260E';font-size:16px;}Insertpicturecontent属性也可以直接在Inserttheimagebefore/aftertheelementh3::after{content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)}插入元素的属性property值内容属性可以直接使用attr获取元素的属性,插入到相应位置这是链接a:after{content:attr(href);}countercounter调用计数器,可以实现不使用列表元素的序号功能。counter应该与counter-increment和counter-reset属性结合使用。内容:counter(,);:disc|圈子|正方形|十进制|小数前导零|低罗马|上罗马||下拉丁语|上拉丁语|亚美尼亚|格鲁吉亚|低阿尔法|upper-alphacounter-reset:[?],给同级元素添加一个计数器,标识自增计数器的范围,为用户自定义名称,为起始编号,默认为0。counter-increment:[?],增加counter的值来标识counter关联的范围,是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;计数器复位: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;}

Middletitle

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