Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
[SOLVED] nbsp in css
I’ve been trying to add a non breaking space in my css for some years now but the browser appears to be ignoring it.
a[rel~=external]:after{content:"\00a0\21D7";My suspicion is that the \21D7 entity, which translates to ⇗ does not respect the non breaking space before it. Is there a work around?
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: [SOLVED] nbsp in css
What are yo trying to achieve?
The thing is, your ::after is a separate node in the generated dom, so that space will not collapse in the presence of a space just preceding it.
In low-power mode.
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: [SOLVED] nbsp in css
phiw13 wrote #343554:
What are yo trying to achieve?
The thing is, your
::afteris a separate node in the generated dom, so that space will not collapse in the presence of aspacejust preceding it.
I’m trying to signify external links but also keep the ⇗ with the linked text.
Although there is no issue on www.neme.org/texts/revisiting-inarticulacy#notes, note 15, if you change the width of your browser, ⇗ moves to the next line. The issue appears in other posts even without changing the browser width.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: [SOLVED] nbsp in css
The magic of the forum has solved it. As I’m defining all external links in a shortcode, I added the html entities there, deleted the pseudo element and all works as expected.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: [SOLVED] nbsp in css
colak wrote #343556:
The magic of the forum has solved it. As I’m defining all external links in a shortcode, I added the html entities there, deleted the pseudo element and all works as expected.
Well now your arrow is fully outside of the link, and not part of it, and part of the actual content. If someone (indexing bot, screen reader, …) reads the text, the ⇗ will be added as part of the text itself.
Possible workaround to your conundrum: keep your generated content and
- remove the non-breaking space part (
\00a0) - add a little bit of padding at the start:
::after { padding-inline-start: .25ch; }
Or, add your white-space node inside the link (<a href=”“>text text </a>@) and use you simplified ::after { content: "\21D7"; }. Since you are using a short code, you just need to add it there.
In low-power mode.
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline