css可以用生成的内容生成内容本身(：after/: the )

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() IE8+。

工作演示。

或者，您也可以使用HTML5 数据-实现与IE8+相同的结果(正如https://stackoverflow.com/users/1542290/mr-alien建议的那样)：

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

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

更新演示。

Answer 2

你可以用JQuery

$(document).ready(function ( ) {

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