Separate each character with a dot in css

Question

How can you transform abc to a. b. c. in pure css.

Only if this is not posible how can you achieve this than in angular (typescript).

Does this answer your question? [How can I replace text with CSS?](https://stackoverflow.com/questions/7896402/how-can-i-replace-text-with-css) — MaxiGui, Oct 08 '20 at 11:56
Short answer. no it is not: [Can we specify custom data attribute values in CSS?](https://stackoverflow.com/questions/36565685/can-we-specify-custom-data-attribute-values-in-css) — MaxiGui, Oct 08 '20 at 11:56

IAfanasov · Answer 1 · 2020-10-08T12:09:34.120

3

With typescript it's easy

"abc".split('').join('. ') + "."

you can make a pipe if you need to reuse this function in several places.

With CSS, I don't know how it is possible. I'm curious to know if there is a CSS solution. I suppose no (:

edited Oct 08 '20 at 12:09

answered Oct 08 '20 at 12:00

IAfanasov

4,775
3
27
42

1

It won't add dot and space after last char – Michał Tkaczyk Oct 08 '20 at 12:02

score 1 · Answer 2 · answered Oct 08 '20 at 11:59

1

If you have control over the dom:

You can place a span around each character and then use the ::after pseudo-element to add the periods after each one.

It would look something like:

span::after{
content:"."
}

answered Oct 08 '20 at 11:59

rguttersohn

464
5
15

score 0 · Answer 3 · answered Oct 08 '20 at 12:01

Unfortunately, you can't write CSS solution to do that in functional way. You can replace that in way that @MaxiGui placed in a comment. If you want to achieve that in typescript (or javascript) you can use this code:

const txt = 'abc';
const transformedTxt = `${txt.split('').join('. ')}.`;

Separate each character with a dot in css

3 Answers3