prismspecs prismspecs - 8 months ago 18
CSS Question

content before and after for links, make that unclickable

I've searched tirelessly for this and am very surprised to not find an answer.

Very simply question: I have a link being rolled out via WPress and I'd like to wrap some characters around it for emphasis, but I don't want those characters to be part of the link. Aka, for:

a:before {
content: " - ";
}


it produces

<a href="X"> - link text</a>


when I want

- <a href="X">link text</a>


Thoughts?

Answer

you may use a positive/negative margin and pointer-events

a {
  margin-left: 1em;
  text-decoration:none;
}
a:before {
  content: '- ';
 margin-left:-0.75em;
 pointer-events:none
}
<a href="X">link text</a>

<a href="X">Another link text</a>