html - 如何使用 CSS3 获取文档的标题

Question

我想使用 CSS3 选择器“content”向一些 HTML 添加一些文本，例如文档的标题，我该怎么做？

Answer 1

你不能用纯 CSS 实现它。 Content 属性值只能是以下之一:

content: normal                                /* Keywords that cannot be combined with other values */ content: none
content: 'prefix'                              /* <string> value, non-latin characters must be encoded e.g. \00A0 for   */
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
content: open-quote chapter_counter            /* Except for normal and none, several values can be used simultaneously */
content: inherit

参见 https://developer.mozilla.org/en-US/docs/Web/CSS/content了解更多详情。

使用attr只能抓取当前元素的属性。

但是你可以像这样添加data属性:

<style>
.article-title:before{
    content:attr(data-mytag);font-size:0.5em;margin-right:1em}
</style>
<span data-mytag="Tips here" class="article-title">1</span>