The subtleties of css.content

Question

Task: I place the legend in the form of pairs "term": "value". On the form it looks like this:

<table class="legend-table"> <tr><td>Destination</td><td>адрес подсети или хоста назначения</td></tr> <tr><td>Gateway</td><td>адрес шлюза, через который данный маршрут доступен</td></tr> ... </table>

Next, I want to make sure that before each decoding of the value there is a dash - – | – | – – | – | – . To insert just a minus, I use the style:

 table.legend-table tr td:last-child:before { content: " - " }

But I want it to be just a dash. I made an intermediate version by inserting a dash character into the code, since the source is in UTF-8 and there is no problem:

 table.legend-table tr td:last-child:before { content: " – " }

But I wanted to know if there is a normal option to insert HTML code in front of the element via CSS (i.e., – or – )

Ideally, it would be to find a way to generally insert anything in front of an element, for example an icon or a glyph, or something else using CSS

zhurof zhurof 6.133 2 7 25 · Accepted Answer · 2018-03-30T13:06:13

In the content property, unicode characters can be written in 16-bit form without a U+ prefix with backslash escaping \ . For example, middle dash – has the code U+2013 . A full list of symbols and their codes can be found at https://unicode-table.com/ru/

 ul{ list-style:none; padding:0; } li:before{ content:'\2013'; margin-right:5px; }

 <ul> <li>asdas</li> <li>asdas</li> </ul>

I tried to compose a <i> from Unicode, screening each one, but it was inserted as a character, without parsing as HTML.
There is such an opportunity, in principle, not in the know?

The subtleties of css.content

1 answer 1

More articles: