如何使字母间距css规则在字符周围添加空格？

Question

In css letter-spacing rule, the rule adds space after the character. Now I want to make the space to surround the character instead. Importantly, when I highlight the whole text, the space before first character should be highlighted.

Workarounds that I know:

Use margin-left and margin-right to adjust:

It works, but highlighting text is broken (still does not highlight the space before the first character)

Use left and right to position the text: Same issue

Answer 1

Instead of margin-left and margin-right you should use

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

Answer 2

On idea is to add a hidden character at the start to create the space you want.

I will be using the zero width space character

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

 <span>Some text here</span> 

If you want to be able to select it you need to add it in the code:

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

 <span>​ Some text here</span>