prismspecs prismspecs - 6 months ago 7
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>