css可以使用生成的内容生成内容(:之后/:之前)

时间:2014-03-13 18:21:47

标签: css

HTML

<h1>My Headline</h1>

CSS

h1:after {
   content: ?content?;
}

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

结果将是:

My HeadlineMy Headline

2 个答案:

答案 0 :(得分:6)

简答:否

不幸的是,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

答案 1 :(得分:-1)

你可以使用JQuery

$(document).ready(function ( ) {

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