Тонкости работы css.content

#css #content

Задача: размещаю легенду в виде пар "термин":"значение". На форме это выглядит так:


...

Destination
адрес подсети или хоста назначения
Gateway
адрес шлюза, через который данный маршрут доступен


Далее, хочу сделать так, чтобы перед каждой расшифровкой значения шло тире - – |
– | –. Чтобы вставить просто минус, использую стиль:

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


Но хочется, чтобы это было именно тире. Я сделал промежуточный вариант, вставив символ
тире в код, благо исходник в UTF-8 и проблемы нет:

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


Но мне хотелось знать, есть ли нормальный вариант вставить HTML-код перед элементом
посредством CSS (то есть – или –)

В идеале было бы найти способ вообще вставки чего угодно перед элементом, например
иконки или глифа, или еще чего средствами CSS
    

Ответы

Ответ 1

В свойство content символы юникода могут записываться в 16-битной форме без префикса
U+ с экранированием обратным слешем \ . Напрмер, среднее тире – имеет код U+2013
. Полный список символов и их кодов можно найти на https://unicode-table.com/ru/


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

  
asdas
  
asdas