Первая буква каждое слово тега заголовка в css немного крупнее

Я хочу, чтобы первая буква всех слов была немного больше остальных

<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>

Но это только увеличивает букву «W» в ДОБРО ПОЖАЛОВАТЬ. По возможности с использованием <span>

Это вовсе не дубликат указанной выше ссылки

pikai 26.10.2018 09:20

Повторяющаяся ссылка не имеет смысла.

SilverSurfer 26.10.2018 10:28

@SilverSurfer, можешь объяснить, почему дубликат не имеет смысла? В приведенном ниже ответе каждое слово в промежутке затем применялось к первой букве, а дубликат обеспечивал лучшее решение, напрямую помещая каждую первую букву в промежуток.

Temani Afif 26.10.2018 22:28
1
3
576
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

first-letter работает только с блочными элементами, поэтому удалите display:inline;, и все готово.

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>

Я хочу, чтобы "T" n TO и "H" в HOMPAGE точно так же, как "W" в WELCOME в той же строке

pikai 26.10.2018 09:13

@InfraDBA, я обновил для вас код

Nilesh Naik 26.10.2018 09:25

Превосходно !! Это то, что я хотел

pikai 26.10.2018 09:25

Другие вопросы по теме