CSS: контент: "\ 00a0"

Question

Сегодня я столкнулся с новым синтаксисом CSS, который я никогда не видел раньше

content:"\00a0";

Проверка на w3schools , это объясняет:

Определение и использование

Свойство content используется с псевдоэлементами: before и: after для вставки сгенерированного контента.

У меня вопрос: не могли бы вы указать мне на примере реального мира, как мы можем использовать это свойство content? И что означает \00a0 в этом случае?

Answer 1

Свойство content используется для добавления содержимого или даже добавления html-сущностей. Что касается \00a0, это шестнадцатеричный код для неразрывного пробела.

Ресурсы:

Дополнительная информация
Javascript, CSS и (X) сущности HTML в числовом порядке

Answer 2

Я использовал его раньше, чтобы реализовать стилизацию текста в плавающем списке

#horz-list li {
  list-style: none;
  float: left;
}

#horz-list li:after {
  content: "\00a0-\00a0";
}

 #horz-list li:last-child:after {
  content: "";
}

<ul id="horz-list">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

Это будет производить что-то вроде

первый предмет - второй предмет - третий предмет

Это сохраняет мою семантику разметки, и я могу представить стилизацию такой черты через CSS.