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

/* <string> value, non-latin characters must be encoded e.g. \00A0 for &nbsp; */
content: 'prefix' 

content: url(http://www.example.com/test.html) /* <uri> value */
content: chapter_counter      /* <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: "." }
}

1.gif

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

2.png

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

HTML:

3.png

CSS:

4.png

效果如下:

5.png

content: 计数值

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

html

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

css

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

6.png

content 显示字符集图标

7.png

content 引用符号

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

默认:

.demo::before {
  content: open-quote;
}
.demo::after {
  content: close-quote;
}

8.png

自定义引用符号:

.demo {
  quotes: "『" "』";
}
.demo::before {
  content: open-quote;
}
.demo::after {
  content: close-quote;
}

9.png

更多前端开发知识,请查阅 HTML中文网 !!

以上就是css content怎么用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏