Community Suggestion: CSS Variables for Common Symbols and Separators
CSS Variables for Common Symbols and Separators
A common practice on the Web beyond World Anvil is to use CSS pseudo-elements ::after and ::before to add punctuation or separators to elements via the content: property. This isn't possible on World Anvil due to the Security Filters and the requirement to use quotation marks when supplying values. It is, however, possible to set the content property via CSS variables.
I am proposing that a limited selection of commonly used symbols, punctuation marks, and separators be defined as CSS variables within a core CSS stylesheet to make it possible to employ this extremely flexible and useful CSS feature in commonly needed situations. For maximum security, these variables could/should be defined as Unicode entities to help ensure that they couldn't be abused. For example (actual list of symbols to be determined by staff and/or community):
--comma: "\00002c";
--bullet: "\002022";
--hyphen: "\00002d";
--colon: "\00003a";
--plus: "\00002b";
}
These variables could then be used via CSS like so:
content: var(--colon) ;
}
.user-css .custom-container li:before {
content: var(--plus) ;
}
The addition of these variables shouldn't require any updates to the security filters and having the symbols defined as Unicode entities should shield them from the potential for abuse.
If you are in favor of this suggestion, please share which symbols/characters you'd like to have available as CSS variables in the Comments on your vote.
Thanks for reading and considering this suggestion.
The Team's Response
Thanks for the suggestion! Buzzard, please message Dimitris with a list of all the characters you think should be added (as well as their Unicode codes) and we'll implement it.22/300 Votes · +5502 points
Votes Cast
-
+100
by Hanhula
on 2025-03-02 04:52 -
+300
by deleyna
on 2025-02-18 17:29 -
+300
by MandoMc
on 2025-02-17 14:33 -
+300
by amelianite
on 2025-02-15 17:55 -
+300
-
+300
by Scalenex
on 2025-02-15 06:35 -
+300
by Leighton Carden
on 2025-02-14 22:35 -
+300
by DMFW
on 2025-02-14 17:43 -
+300
by Kittymonster
on 2025-02-14 17:16 -
+100
by oaster2000
on 2025-02-13 14:38 -
+100
by nnie
on 2025-02-13 07:49 -
+1
-
+300
by Goose80
on 2025-02-12 22:33 -
+300
by kalilinai
on 2025-02-12 21:35 -
+1
by Michael Chandra
on 2025-02-11 21:10 -
+300
by Those2Nerds
on 2025-02-10 19:01 -
+100
by ss2020
on 2025-02-10 15:42 -
+300
by SoulLink
on 2025-02-10 14:23 -
+300
by WantedHero
on 2025-02-10 13:00I have no idea how this works and what it'll do, cause I'm a dummy, BUT, Graylion said "hell ya" so I'm gonna think this is pretty important. SO I'M IN!!!
-
+300
-
+300
by PoppaeaSabina
on 2025-02-08 19:16 -
+300
by kaixabu
on 2025-02-08 18:01I'd love to have arrows (https://www.toptal.com/designers/htmlarrows/arrows/) for things like bullets and maybe check marks.
-
+300
by Buzzard
on 2025-02-08 17:56
Find your way!
Resources
WHO WE ARE
LEGAL
Listen to our Podcast
