如何使用'cite'属性仅使用CSS显示URL？

Question

我需要使引用属性可见，即。在我的网页上显示blockquote的网址。我被告知只使用CSS，没有HTML。

以下是我目前在html中使用的内容：

<blockquote cite="https://en.wikipedia.org/wiki/History_of_television">
<p>text from wiki</p>

我认为CSS会像：cite href {display: inline-block;}，但那不起作用。

Answer 1

我认为这就是你所追求的：

 blockquote:before {
   content: attr(cite);
 }

以下是一些其他样式的示例：http://jsfiddle.net/fx4nw3q0/1/

Answer 2

blockquote:after {
  content: attr(cite);
  display: block;
}

您可以使用attr(<name>)通过属性名称将属性值拉入伪块。

JSFiddle Example

Answer 3

您可以使用CSS ::after pseudo-element选择器进行展示。

blockquote::after{
  content:attr(cite)
}

你可以使用css attr function，

获取网址

DEMO JSBin