CSS content 属性有什么作用? 可以怎么用? 下面本篇文章给大家介绍一下 CSS content 属性的作用和一些使用场景. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
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 */
- 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: string value 字符串
可以加入任何字符, 包括 Unicode 编码等各种字符.
- <a class="demo" href="https://www.xunlei.com/" title="精彩, 一下就有"> 精彩, 一下就有 </a>
- .demo:after{
- content: "↗"
- }
我们还可以通过 content 内字符串的变化, 实现类似 加载中... 的动画效果
- .demo:after{
- animation: dot 1.6s linear both;
- }
- @keyframe dot{
- 0%{ content: "." }
- 33%{ content: ".." }
- 66%{ content: "..." }
- 100%{ content: "." }
- }
类似的, 还有种实现方式, steps 阶梯函数实现元素位移
<a class="demo" href="#" title="精彩, 一下就有">
精彩, 一下就有 < dot>...</dot>
- </a>1
- dot {
- display: inline-block;
- height: 1em;
- line-height: 1;
- text-align: left;
- vertical-align: -.25em;
- overflow: hidden;
- }
- dot::before {
- display: block;
- content: '...\A..\A.';
- white-space: pre-wrap;
- animation: dot2 1.6s infinite step-start both;
- }
- @keyframes dot2 {
- 33% {
- transform: translateY(-2em);
- }
- 66% {
- transform: translateY(-1em);
- }
- }
content: uri value 外部资源
用于引用媒体文件, 图片, 图标, 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 呢?
content: attr() value 属性值的引用
调用当前元素的属性, 可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来.
- .demo:after{
- content: attr(href);
- }
- .demo:after{
- content: attr(class);
- }
content: counter values
调用计数器, 可以不使用列表元素实现序号功能. 具体请参见 counter-increment 和 counter-reset 属性的用法.
- <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;
- }
引用符号
属于引用符号的取值有 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;
- }
quotes 可以设置多组引用符号, 用以应对次级引用:
- .demo {
- quotes: "«" "»" "" "›";
- }
- .demo::before {
- content: no-open-quote open-quote;
- }
- .demo::after {
- content: close-quote;
- }
总结
以上我们主要了解了 content 的一些用法和巧用, 当然 :before 和 :after 本身作为元素, 也可以实现多种应用效果, 比如: 三角形 (border), 装饰元素, 阴影等. 希望通过以上介绍, 能让大家对 content 有更深入的了解, 帮助我们在平时的布局和样式以及用户体验中发挥更大的价值.
Demo codepen 地址: https://codepen.io/xiangshuo1992/pen/zQGyBW
END.
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/17430.html