The before and after pseudo elements

by ginpei

HTML

<p class="target">(content)</p>
<p>The book said <q>Humpty Dumpty sat on a wall</q>.</p>

CSS

.target {
    border: solid 1px #f99;
    color: #f00;
    padding: 4px;
}
.target::before {
    content: "[BEFORE]";
}
.target::after {
    content: "[AFTER]";
}

q::before,
q::after {
    content: '"';
}