现代 CSS

content

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

content属性与::before::after伪元素配合使用,向网页中某个元素插入生成内容

content属性的值就是通过伪元素插入到该元素的内容。

使用content属性插入的内容可以是文本字符串、 符号、 图像、 计数器(即样式列表),或引号。同时,将多个值合并为一个,也是可能的。请参阅以下的值和一些详细的实例。

请注意,content属性必须包含在::before::after伪元素的规则之中,否则将不会被生成和插入。总之,你必须总是包含content。在许多情况下,如果你只是想要利用伪元素进行实例修饰,不想添加任何内容可以将其设置为空。你可以阅读更多关于::before::after的不同用例。

笔记

可访问性

使用伪元素插入到页面的内容是插入不到 DOM之中的 — — 它只可以直观地显示。因此,屏幕阅读器不能访问和读取使用伪元素生成的内容。因此,建议您不要使用伪元素向页面中插入重要的内容(比如页脚注释的相关文章)。

伪元素主要是用来插入修饰样式的内容,不应该被用来插入与页面完整性有重要意义的内容。

此外,由于使用伪元素插入的内容不插入到 DOM 中,这意味着你不能使用Javascript添加任何事件处理程序。

官方语法

语法

content: normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit 

属性值

none

不插入任何内容。不生成伪元素。

normal

::before::after伪元素设置为none

<string>

一个文本字符串。文本字符串被包裹在引号内。请参阅<string>数据类型可能的属性值列表。

示例:在一个有new类的元素(如产品的列表项)之后插入一个“New!”注释.

.new::after {
    content: "New!";
    color: green;
}

你也可以在content属性后面,通过编写\A转义字符使生成的内容换行。同时要注意这个换行符仍受制于white-space属性。

<uri>

URI是url()函数指定的。它指向一个外部资源,如图像。如果资源或图像不能显示,浏览器必须离开,就好像它是未指定或显示一些提示表明该资源不能用。

例如,在页面一个具有名为signup类的按钮中添加一个icon图标。

button.signup::before {
    content: url(path/to/signup.png);
}

<counter>

一个CSS Couter。计数器可以指定两种不同的函数: counter()counters(). 请参阅counter()counters()查看更多详细信息。

示例:

li {
    content: counter(my-counter-name);
}

计数器是一个相当长的话题,不在今天所讲内容范围之内。有关详细信息,请参阅CSS Couter

open-quote | close-quote

这些值已经被quotes属性相应的字符串替换。例如:

q, blockquote {
  quotes: "“" "”" "‘" "’";
}
q:before, blockquote:before {
    content: open-quote;
}
q:after, blockquote:after {
    content: close-quote;
}

更多详细的解释和实例请参阅quotes属性。

no-open-quote | no-close-quote

停止显示引用,但仍递增(递减)引用的嵌套级别。请参阅quotes

attr(X)

此函数 (简称 'attribute') 返回元素的 X 属性的字符串。如果元素没有该 X 属性,则返回一个空字符串。

例如,<a>元素有href属性,以确定该链接所指向的位置。content属性结合使用attr()函数可以获取href属性中URL的值,这是十分强大的功能。这可以用于打印样式表时,在该链接的内容之后(使用::after伪元素)将链接指向的 URL 链接打印出来。例如 ︰

@media print {
    a[href]::after {
        content: attr(href);
    }
}

上述规则将选择所有链接的 href 属性(使用属性选择器),并使用attr()函数检索所有链接属性的值,然后将所有的值设置为::after伪元素的内容,实现链接的内容之后插入链接。

attr()函数可以检索元素任何属性的值,包括自定义的HTML5 data-* 属性。例如:

<!-- HTML -->
<li data-label="todo">Buy Milk</li>

/*CSS*
li::before {
    content: attr(data-label);
    color: grey;
}

在 CSS3 中, attr()表达式获取了一种新的语法。新语法并不稳定,不能在所有的浏览器中获取支持,并且还没有举例用例。该规范还表示,新语法还处于候选推荐阶段被淘汰的风险之中。如果新语法不会被丢弃,将使用新值更新此条目。语法如下所示:

attr( <attr-name> <type-or-unit>? [ , <attr-fallback> ]? )

<attr-name> 表示属性名称,<type-or-unit> 是一个可选的参数告诉用户代理如何解释这个属性的值,并为attr()表达式定义了一个类型。如果省略的话,'string' 就会被隐含。<attr-fallback>参数表示一个可用于回退的值,例如用于已命名的属性丢失,或其值不能解析成给定的类型,或使用了无效范围内的属性。如果它不存在,就会应用如下规则: 给定的默认值 < type-or-unit < (参考如下列表)。

unit参数的值可以是以下之一: string, color, url, integer, number,length, angle(角度), time, or frequency(频率)。

如上文所述,如果新的表达式语法在将来不会被丢弃,此条目将使用详细的说明和示例更新此项。

注意事项

content属性中是可以结合不同内容的。之后这些内容会连接为一个。例如,以下将从上面的例子检索自定义数据属性的值,并在其后面添加一个冒号︰

li::before {
    content: attr(data-label) ":";
    color: grey;
}

下面的示例改善了上面那个检索链接的href值,将其打印在打印样式表中的例子。在链接内容后面不添加一些视觉分隔符可能会混淆读者,所以是将要打印的URL值包裹在一对括号之中是很好的选择。这可以通过在attr()函数前后结合两个括号字符串来实现,就像这样:

@media print {
    a[href]::after {
        content: " (" attr(href) ")";
    }
}

display属性用于指定插入的内容为inline-level(内联级) 还是 block-level(块级)。默认情况下,::before::after伪元素为内联。

内容和样式的分离

除了可访问性问题,有些人可能会认为,通过CSS添加内容是为了使样式与内容分离,以帮助更好的维护代码。在大多数情况下可能如此,但它仍允许模块化的样式表。例如,上面示例中,通过粘贴代码片段,实现打印样式表上添加链接内容就是网站中一个很好的应用。

另外,比如在页面上所有的链接上插入一个“外部链接”图标,引用外部网页也是十分有用模块化的,并且维护这些样式和内容是相当容易的,所以通过CSS添加内容的概念可能对于一些较真的人难以接受,但它仍然是有用的。它是由CSS作者和开发人员来决定添加什么样的内容,而不会影响其代码的可维护性。

在线实例

下面的在线实例显示了content属性与::before::after伪元素配合使用,插入生成的不同内容。

你可以在::before::after看到更多的实例展示。

浏览器支持

所有主流浏览器都支持content属性:Chrome, Firefox, Safari, Opera, Internet Explorer, Android 和 iOS。

扩展阅读

本文根据@Sara Soueidan的《content》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://tympanus.net/codrops/css_reference/content/

静子

在校学生,本科计算机专业。一个积极进取、爱笑的女生,热爱前端,喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博:@静-如秋叶

如需转载,烦请注明出处:http://www.w3cplus.com/css3/css-reference/content.htmlWomen's Clothing, Footwear & Accessories

返回顶部