Как сделать так, чтобы css rule добавлял пробел вокруг символа?

Question

В правиле css letter-spacing правило добавляет пробел после символа.Теперь я хочу сделать пространство для окружения персонажа.Важно отметить, что когда я выделяю весь текст, пробел перед первым символом должен быть выделен.

Обходные пути, которые я знаю:

Используйте поля left-left и margin-right, чтобы отрегулировать:

Работает, но выделение текста не работает (по-прежнему не выделяется пробел перед первым символом)

Используйте левую и правую для позиционирования текста: та же проблема

Answer 1

По идее стоит добавить скрытый символ в начале, чтобы создать желаемое место.

Я буду использовать пробел нулевой ширины символ

span {
  background:pink;
  font-size:25px;
  letter-spacing:20px;
}
span:before {
  content:"\80";
}

<span>Some text here</span>

Если вы хотите иметь возможность выбрать его, вам нужно добавить его в коде:

span {
  background:pink;
  font-size:25px;
  letter-spacing:20px;
}

<span>​ Some text here</span>

Answer 2

Вместо полей слева и справа вы должны использовать

.TEXTCLASS {
 padding-left: SOMEVALUE ..... 2px;
 padding-right: SOMEVALUE ..... 2px;
{