Изменение цвета на один элемент заголовка блоггера

Question

Я пытаюсь дополнительно настроить заголовок моего блога.Вот мой текущий заголовок блога:

Savannah's ❊ Secretaire

Как изменить цвет среднего символа на # b32c20?Я хочу, чтобы слова оставались черными.Было бы здорово, если бы я мог добавить CSS-код.

Заранее спасибо.

Answer 1

Вы можете изменить цвет символа, используя элемент span для применения определенных атрибутов к элементу.

HTML: <h1>Savannah's <span class="class">❊</span> Secretaire</h1>

CSS: .class { color: #b32c20 }

Answer 2

Если вы не можете изменить HTML, вы можете использовать градиент, чтобы закрасить текст, и вы сможете применить определенный цвет к символу.

h1 {
  display:inline-block;
  background: linear-gradient(to right, black 48%,#b32c20 48%, #b32c20 60%,black 50%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>Savannah's ❊ Secretaire</h1>

Значения градиента не являются общими и будут зависеть от текста

Answer 3

Вам нужно добавить интервал вокруг среднего символа, например:

Savannah's <span class="title-symbol">❊</span> Secretaire

, а затем нацелить этот интервал с помощью CSS следующим образом:

.title-symbol {
     color: red; // put whatever color you want here
}