Это демонстрация работы псевдоэлемента ::target-text. Кликните по одной из ссылок выше — страница прокрутится к совпадению и подсветит найденный целевой текст.

Немного заполнителя: дизайн интерфейсов часто требует подсветки результата перехода, чтобы пользователь быстрее ориентировался в контенте. Когда используется адрес с текстовым фрагментом, можно задать собственный стиль подсветки через ::target-text и подогнать его под тему сайта.

Пример: здесь встречается словосочетание целевой текст среди прочего содержимого, чтобы можно было увидеть, как срабатывает выделение. Ниже добавим ещё один фрагмент, чтобы проверить несколько ссылок подряд.

А вот и он — ещё один фрагмент — который также может быть найден ссылкой с фрагментом адреса. Этот подход удобно применять для цитат, результатов поиска и навигации по длинным документам.

Ещё немного текста для прокрутки: разработчики могут настраивать контрастность и длительность перехода, чтобы подсветка постепенно исчезала и не отвлекала пользователя от чтения основного контента.