html如何折叠content,css content怎么用？

css content怎么用？下面本篇文章给大家介绍一下css content属性。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

css content怎么用？

content 属性与 :before 及 :after 伪元素配合使用，在元素头或尾部来插入生成内容。

说明： 该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的盒子类型可以用属性 display 控制。

MDN 对 content 的取值描述：content: normal /* Keywords that cannot be combined with other values */

content: none

/* value, non-latin characters must be encoded e.g. \00A0 for   */

content: 'prefix'

content: url(http://www.example.com/test.html) /* value */

content: chapter_counter /* values */

content: attr(value string) /* attr() value linked to the HTML attribute value */

content: open-quote /* Language- and position-dependant keywords */

content: close-quote

content: no-open-quote

content: no-close-quote

/* Except for normal and none, several values can be used simultaneously */

content: open-quote chapter_counter

content: inherit

content: 字符串

可以加入任何字符，包括 Unicode 编码等各种字符；还可以通过 content 内字符串的变化，实现类似 加载中… 的动画效果。.demo:after{

animation: dot 1.6s linear both;}@keyframe dot{

0%{ content: "." }

33%{ content: ".." }

66%{ content: "..." }

100%{ content: "." }

}

content: 外部资源

用于引用媒体文件，图片，图标，SVG等。.demo:after{

content: url(https://img-vip-ssl.a.88cdn.com/img/xunleiadmin/5b9889e14dcdc.png);

}

受 background-image: url() 可以用渐变实现背景启发，类似的，一些函数是不是可以放在 content 中来实现？.demo:after {

content: radial-gradient(circle at 35% 35%, white 10%, pink 70%);

display: inline-block;

border-radius: 50%;

width: 100px;

height: 100px;

overflow: hidden;

}

content 通过attr()显示标签的属性

HTML：

CSS：

效果如下：

content: 计数值

调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。

html

大标题

中标题

小标题

小标题

中标题

小标题

小标题

大标题

中标题

小标题

小标题

中标题

小标题

小标题

cssh1::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;

}

content 显示字符集图标

content 引用符号

属于引用符号的取值有 4 种，共 2 对，在 CSS 中用了语义较为清晰的关键词来表示： open-quote、 close-quote、no-open-quote、no-close-quote。

默认：.demo::before {

content: open-quote;

}

.demo::after {

content: close-quote;

}

自定义引用符号：.demo {

quotes: "『" "』";

}

.demo::before {

content: open-quote;

}

.demo::after {

content: close-quote;

}

更多前端开发知识，请查阅 HTML中文网 ！！