<p>The officer left a note saying <q cite="https://johnrhea.com/summons" class="show-cite">You have been summoned to appear on the 4th day of January on charges of attempted reader bribery.</q></p>

<p>The officer left a note saying <q cite="https://johnrhea.com/summons" class="on-hover">You have been summoned to appear on the 4th day of January on charges of attempted reader bribery.</q></p>
/* NOTE: you must add the closing smart quote as q's automatic quotes are added with pseudo elements */ 
q.show-cite[cite]::after {
  content: "” (" attr(cite) ") ";
}

q.on-hover[cite]::before {
  content: "“";
}
q.on-hover[cite]:hover::after {
  content: "” (" attr(cite) ") ";
}

body {
  max-width: 20em;
  margin: 1em;
  font: 1.25rem/1.4 Georgia, serif;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.