时间:2021-07-01 10:21:17 帮助过:12人阅读
content 属性的值就是通过伪元素插入到该元素的内容。
使用 content 属性插入的内容可以是文本字符串、 符号、 图像、 计数器(即样式列表),或引号。同时,将多个值合并为一个,也是可能的。请参阅以下的值和一些详细的实例。
请注意, content 属性必须包含在 ::before 和 ::after 伪元素的规则之中,否则将不会被生成和插入。总之,你必须总是包含 content 。在许多情况下,如果你只是想要利用伪元素进行实例修饰,不想添加任何内容可以将其设置为空。你可以阅读更多关于 ::before 和 ::after 的不同用例。
使用伪元素插入到页面的内容是插入不到 DOM之中的 — — 它只可以直观地显示。因此,屏幕阅读器不能访问和读取使用伪元素生成的内容。因此,建议您不要使用伪元素向页面中插入重要的内容(比如页脚注释的相关文章)。
伪元素主要是用来插入修饰样式的内容,不应该被用来插入与页面完整性有重要意义的内容。
此外,由于使用伪元素插入的内容不插入到 DOM 中,这意味着你不能使用Javascript添加任何事件处理程序。
content: normal | none | [| | | attr( ) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
不插入任何内容。不生成伪元素。
将 ::before 和 ::after 伪元素设置为 none 。
一个文本字符串。文本字符串被包裹在引号内。请参阅
示例:在一个有 new 类的元素(如产品的列表项)之后插入一个“New!”注释.
.new::after { content: "New!"; color: green;}
你也可以在 content 属性后面,通过编写 \A 转义字符使生成的内容换行。同时要注意这个换行符仍受制于 white-space 属性。
URI是 url() 函数指定的。它指向一个外部资源,如图像。如果资源或图像不能显示,浏览器必须离开,就好像它是未指定或显示一些提示表明该资源不能用。
例如,在页面一个具有名为 signup 类的按钮中添加一个icon图标。
button.signup::before { content: url(path/to/signup.png);}
一个 CSS Couter 。计数器可以指定两种不同的函数: counter() 或 counters() . 请参阅 counter() 或 counters() 查看更多详细信息。
示例:
li { content: counter(my-counter-name);}
计数器是一个相当长的话题,不在今天所讲内容范围之内。有关详细信息,请参阅 CSS Couter 。
这些值已经被 quotes 属性相应的字符串替换。例如:
q, blockquote { quotes: "“" "”" "‘" "’";}q:before, blockquote:before { content: open-quote;}q:after, blockquote:after { content: close-quote;}
更多详细的解释和实例请参阅 quotes 属性。
停止显示引用,但仍递增(递减)引用的嵌套级别。请参阅 quotes 。
此函数 (简称 'attribute') 返回元素的 X 属性的字符串。如果元素没有该 X 属性,则返回一个空字符串。
例如, 元素有 href 属性,以确定该链接所指向的位置。 content 属性结合使用 attr() 函数可以获取 href 属性中URL的值,这是十分强大的功能。这可以用于打印样式表时,在该链接的内容之后(使用 ::after 伪元素)将链接指向的 URL 链接打印出来。例如 ︰
@media print { a[href]::after { content: attr(href); }}
上述规则将选择所有链接的 href 属性(使用 属性选择器 ),并使用 attr() 函数检索所有链接属性的值,然后将所有的值设置为 ::after 伪元素的内容,实现链接的内容之后插入链接。
attr() 函数可以检索元素任何属性的值,包括自定义的 HTML5 data-* 属性 。例如:
在 CSS3 中, attr() 表达式获取了一种新的语法。新语法并不稳定,不能在所有的浏览器中获取支持,并且还没有举例用例。该规范还表示,新语法还处于候选推荐阶段被淘汰的风险之中。如果新语法不会被丢弃,将使用新值更新此条目。语法如下所示:
attr(? [ , ]? )
表示属性名称,
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/ 。
在校学生,本科计算机专业。一个积极进取、爱笑的女生,热爱前端,喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博:@静-如秋叶