如何使用CSS3獲取文檔標題

Question

我想使用CSS3選擇器「content」向某些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>