<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.