How to put blank space between two specific characters in CSS

Question

Is it possible to add blank space between specific letters using CSS?

What I have: UnitedKingdom

What I want: United Kingdom

Ideally, I want to read the text using CSS and if I found "UnitedKingdom" then replace it with "United Kingdom"

You can't do this in CSS. CSS is a styling language that can do minimal computations. In this case, you should try to use Javascript. — Rojo
– Rojo, Commented Jul 25, 2020 at 0:26

Dharman · Accepted Answer · 2020-07-25 00:48:24Z

1

You could use the letter-spacing property with CSS, and place the last letter of United (d) in a span with a class that makes it space out.

span{
  letter-spacing: 5px;
}

<p>
 Unite<span>d</span>Kingdom
</p>

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Jul 25, 2020 at 0:42

anshul

3,3613 gold badges15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marcelo Serra · Accepted Answer · 2020-07-25 02:21:25Z

0

Maybe some workaround using attr() and :after on CSS could work, but would be much better using Javascript.

answered Jul 25, 2020 at 2:21

Marcelo Serra

1