Установка нескольких цветов фона на H1

Question

Я искал много похожих вопросов по SO, но не получил желаемого результата.Я хочу подобное, как это:

Я хочу стилизовать две разные линии с разными цветами BG

Я пробовал с этим стилем

h1.g1-mega.g1-mega-1st.entry-title:first-line {background:#ffd334;}
h1.g1-mega.g1-mega-1st.entry-title:last-line {background:#ddd;}

<h1 class="g1-mega g1-mega-1st entry-title" itemprop="headline">Top 25 Wild Bird Photographs of the Week: Mountain Birds </h1>

проверьте скрипку

вторая строка CSS не работает.

Answer 1

span:first-child {
  background-color: yellow;
  padding: 10px;
}

span:last-child {
  background-color: lightgreen;
  padding: 10px;
}

h1 {
  line-height: 1.8;
}

<h1><span>Top 25 Wild Bird Photographs</span><br>
    <span>of the Week: Mountain Birds </span>
</h1>

Answer 2

span {
  padding: 10px 8px;
  display: inline-block;
}

span:first-child {
  background-color: yellow
}

span:last-child {
  background-color: lightgreen;
}

<h1>
  <span>Top 25 Wild Bird Photographs</span>
  <span>of the Week: Mountain Birds </span>
</h1>

Answer 3

У вас нет селектора last-line - поэтому вы можете установить стиль для h1 и переопределить первую строку с помощью селектора first-line:

h1.g1-mega.g1-mega-1st.entry-title {background:#ddd;}
h1.g1-mega.g1-mega-1st.entry-title:first-line {background:#ffd334;}

<h1 class="g1-mega g1-mega-1st entry-title" itemprop="headline">
Top 25 Wild Bird Photographs of the Week: Mountain Birds 
</h1>

---

Обратите внимание, что не все свойства работают с селектором first-line - см. Список свойств здесь :

С псевдоэлементом :: first-line можно использовать только небольшое подмножество свойств CSS:

Все свойства шрифта: font, font-kerning, font-style, font-вариант, шрифт-вариант-числовой, шрифт-вариант-позиция, шрифт-вариант-восточно-азиатский, шрифт-вариант-шапки, шрифт-вариант-альтернативы, шрифт-вариант-лигатуры, шрифт-синтез, настройки-шрифта-настройки,font-language-override, font-weight, font-size, font-size-Adjust, font-stretch и font-family

Все свойства, связанные с фоном: background-color, background-clip, background-изображение, происхождение фона, положение фона, повторение фона, размер фона, прикрепление фона и режим смешивания фона

Свойство цвета

расстояние между словами, расстояние между буквами, оформление текста, преобразование текста и высота строки

text-shadow, text-decoрацион, цвет текста-декорации, текст-декорации-линии, текст-декорации-стиля и вертикальное выравнивание.

Answer 4

h1.g1-mega {background:#ddd;}
h1.g1-mega:first-line {background:#ffd334;}