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() 是IE8 +支持.

工作演示.

另外,您也可以使用HTML5 数据-*属性来达到相同的结果(如@MrAlien建议),这是在支持IE8 +以及:

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

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

更新的演示.