Is a CSS pseudo-element an acceptable replacement for missing whitespace?

Hello, I have a glossary plugin I am using in Drupal which litters my content with extra whitespace elements (not characters) which messes up content formatting. I have successfully removed these whitespace elements from the DOM using javascript which targets any paragraph where the glossary plugin has caused problems. The new problem comes when two glossary terms appear next to each-other and my script removes the whitespace between them. They are still separate elements in the DOM which are read out by screen readers as separate words, but they look like one long word... I can fix this visually with something like
.definition+abbr::before{
content:" ";
}
.definition+abbr::before{
content:" ";
}
...however it really does feel like a hack. I also can't get rid of the text decoration on the ::before element, although that's minor, compared to accessibility concerns. I'm of course going to try and fix my javascript, but in the meantime would this workaround/hack be ok?
1 Reply
Jacord
JacordOP11mo ago
Here's a codepen which approximates what I'm talking about: https://codepen.io/crowjake/pen/jOJmyoe
crowjake
CodePen
jOJmyoe
...
Want results from more Discord servers?
Add your server