html - Style the first letter of every word instead of only the first word? -

html - Style the first letter of every word instead of only the first word? -

to style first letter utilize :first-letter in paragraph.

p:first-letter { font-size: 200%; color: #8a2be2; }

but if want style the first letter of every word in paragraph?

there no css way without adding elements markup (or dom tree javascript), because there no css selector purpose.

if add together markup each word, can utilize :first-letter on them if create them inline blocks (:first-letter cannot used on inline elements, span default):

<style> .word { display: inline-block; } .word:first-letter { font-size: 200%; color: #8a2be2; } </style> <span class=word>hello</span> <span class=word>world</span>

alternatively, can of course of study utilize markup each initial letter, e.g. <span class=word>h</span>ello <span class=word>w</span>orld, , utilize simple selector .word set character formatting. using “word markup” might, however, a) improve in html source, b) allow format entire words, too, should become desirable, , c) avoid potential risks caused breaking word markup (very little risks probably, people worried them).

html css word