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

Question

Мне нужно покрасить вторую половину заголовку в красный. Я пытался объеденять в 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;
}

Answer 1

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

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

css:

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

.h11 {
    margin-left: 400px;
}
.colored {
    color: red;
}

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

Answer 3

Ещё один вариант при помощи градиента. Плюс в том, что не нужно захламлять 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>

БЛОГ НА HUSL

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

Ответы (3 шт):