Как покрасить часть заголовка?

Рейтинг: 1Ответов: 3Опубликовано: 16.04.2023

Мне нужно покрасить вторую половину заголовку в красный. Я пытался объеденять в div вторую и первую половину, задавать float для второй половины, но ничего не выходило: html:

<body>
    <div class="hat">
        <h1 class="h11">Easy*Car*</h1>
    </div>
</body>

css:

.hat {
    background-color:dimgrey;
    color: white;
}

.h11 {
    margin-left: 400px;
}
css html
Источник: Stack Overflow на русском

Ответы

▲ 4

Например, разделив его через span:

.hat {
    background-color:dimgrey;
    color: white;
}

.h11 {
    margin-left: 400px;
}
.colored {
    color: red;
}
<div class="hat">
  <h1 class="h11">Easy<span class='colored'>*Car*</span></h1>
</div>

▲ 2

Ну как самый простой вариант

.hat {
  background-color:dimgrey;
  color: white;
}
.h11 {
  margin-left: 400px;
}
.h11 span {
  color: red;
}
<body>
    <div class="hat">
        <h1 class="h11">Easy<span>*Car*</span></h1>
    </div>
</body>

▲ 1

Ещё один вариант при помощи градиента. Плюс в том, что не нужно захламлять H1 заголовок, а минус в том, что если изменится длина предложения, цвет будет не правильно делить слова по цветам.
Может кому и пригодится.

.h11 {
  font-weight: bold;
  font-size: 80px;
  background: linear-gradient(90deg, black 44%, red 44%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 92vh;
}
<div class="hat">
  <h1 class="h11">Easy*Car*</h1>
</div>