How to use the 'cite' attribute to display the URL using CSS only?

Question

I need to make a cite attribute visible, ie. showing the url of a blockquote on my webpage. I was told to use only CSS, no html.

Here is what I am currently working with in the html:

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

I thought the CSS would be something like: cite href {display: inline-block;} , but that's not working.

Answer 1

I think this is what you're after:

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

Here's an example with some additional styling: http://jsfiddle.net/fx4nw3q0/1/

Answer 2

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

You can use attr(<name>) to pull in attribute values into pseudo blocks by the attribute name.

JSFiddle Example

Answer 3

You can show with CSS ::after pseudo-element selector.

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

and you can get url with css attr function ,

DEMO JSBin