CSS Возможно ли заменить стили части фразы без дополнительных тегов?

Question

Есть довольно частая задача от дизайнеров, по разукрашиванию конкретных частей фразы заголовков в отдельные цвета. Пример.

Большенство версий в верстке сводиться к добавлению сторонних тегов в фразу, по типу.

body {
  margin: 0;
  padding: 20px;
  color: #fff;
  background-color: #110929;
  font-family: Inter, sans-serif;
  ;
}

h1 {
  max-width: 250px;
}

h1 b {
  color: #1C51FE;
  font-weight: 700;
}

<h1>Create Your Own <b>NFT Dream</b> Gallery</h1>

Вопрос - Есть ли решения, при которых в тег заголовка <h1> не надо вставлять дополнительных тегов, для стилизации ? (По типу <b> и аналогов) *Думал про data атрибуты, абсолютное позиционирование и :before с контентом, но если текст должен быть адаптивным, нормальной реализации не получилось. Возможно кто-то знает эффективное решение ?

Answer 1

Вот нашел, новий API на решение собственного вопроса.

let text_node = document.querySelector('h1').firstChild

let highlightA = new Highlight()
let rangeA = new Range()
rangeA.setStart(text_node, 16)
rangeA.setEnd(text_node, 25)
highlightA.add(rangeA)
CSS.highlights.set('rangeA', highlightA)

body {
  margin: 0;
  padding: 20px;
  color: #fff;
  background-color: #110929;
  font-family: Inter, sans-serif;
}

h1 {
  max-width: 250px;
}

h1::highlight(rangeA) {
  color: #1C51FE;
  font-weight: 700;
}

<h1>Create Your Own NFT Dream Gallery</h1>

БЛОГ НА HUSL

CSS Возможно ли заменить стили части фразы без дополнительных тегов?

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