css可以使用生成的内容生成内容（：之后/：之前）

Question

HTML

<h1>My Headline</h1>

CSS

h1:after {
   content: ?content?;
}

是否可以使用生成的内容第二次显示h1的内容？

结果将是：

My HeadlineMy Headline？

Answer 1

简答：否

不幸的是，CSS中没有内容选择器。所以答案是否定的。

但是，您可以使用<h1>元素的属性并使用attr() CSS表达式来实现这一目的：

<h1 title="This is a heading">This is a heading</h1>

h1:after {
  content: " " attr(title);
}

值得注意的是attr() is supported in IE8+。

<强> WORKING DEMO

或者，您可以使用HTML5 data-* attributes 来获得相同的结果（建议为@MrAlien） is supported in IE8+ ：

<h1 data-title="This is a heading">This is a heading</h1>

h1:after {
  content: " " attr(data-title);
}

<强> UPDATED DEMO

Answer 2

你可以使用JQuery

$(document).ready(function ( ) {

    $('h1').each(function() {
        $(this).text($(this).text() + $(this).text());
    });
});