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

Question

我想使用CSS3选择器＆＃34;内容＆＃34;为某些HTML添加一些文本，例如文档的标题，我该怎么做呢？

Answer 1

您无法在纯CSS中实现它。内容属性值只能是以下之一：

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只能获取当前元素的attrubites。

但您可以添加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>