First letter every word of header tag in CSS little bigger

Question

I want first letter of all words to be little bigger than rest

<style>
h1 {
    color: #1c1c1d;
    font-family: 'Raleway',sans-serif;
    font-size: 27px;
    font-weight: normal;
    margin: -2px 0px 0px;
    text-align: center;
    display:inline;
    text-shadow: 1px 1px 2px #082b34;
}
h1::first-letter {
    font-size: 125%;
}
</style>

<h1> WELCOME TO HOMEPAGE </h1>

But this only increasing the 'W' in WELCOME. If possible with use of <span>

@SilverSurfer can you explain how the duplicate make no sense? The below answer made each word in a span then applied first letter and the duplicate provided a better solution by directly putting each first letter in a span. — Temani Afif, Oct 26 '18 at 20:28

Nilesh Naik · Accepted Answer · 2018-10-26T07:25:05.127

3

first-letter works only for block elements so remove display:inline; and you are good to go.

h1 {
  color: #1c1c1d;
  font-family: 'Raleway', sans-serif;
  font-size: 27px;
  font-weight: normal;
  margin: -2px 0px 0px;
  text-align: center;
  display: inline-block;
  text-shadow: 1px 1px 2px #082b34;
}

span {
  display: inline-block;
}

span::first-letter {
  font-size: 200%;
  color: #eb632d;
}

<h1> <span>WELCOME</span> <span>TO</span> <span>HOMEPAGE</span> </h1>

edited Oct 26 '18 at 07:25

answered Oct 26 '18 at 07:11

Nilesh Naik

751
3
9

I want 'T' n TO, and 'H' in HOMPAGE just like the 'W' In WELCOME in the same line – mysqlrockstar Oct 26 '18 at 07:13
@InfraDBA i have updated the code for you – Nilesh Naik Oct 26 '18 at 07:25
Superb !! Thats what I wanted – mysqlrockstar Oct 26 '18 at 07:25

First letter every word of header tag in CSS little bigger

1 Answers1