::target-text

::target-text — псевдоэлемент, который применяется к тексту, найденному через текстовый фрагмент в URL вида #:~:text=.... Он позволяет задать стили выделения, которые браузер покажет после перехода по такой ссылке.

        
          
          <p>  Пример ссылки на <a href="#:~:text=целевой%20текст">целевой текст</a> на этой же странице.</p>
          <p>
  Пример ссылки на <a href="#:~:text=целевой%20текст">целевой текст</a> на этой же странице.
</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          ::target-text {  background-color: yellow;  color: black;  text-shadow: none;}
          ::target-text {
  background-color: yellow;
  color: black;
  text-shadow: none;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Запись простая:

        
          
          ::target-text { /* стили */ }
          ::target-text { /* стили */ }

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Работает совместно с механизмом текстовых фрагментов в URL. Пример ссылки:

        
          
          <a href="https://example.com/page#:~:text=целевой%20текст">Перейти к целевому тексту</a>
          <a href="https://example.com/page#:~:text=целевой%20текст">Перейти к целевому тексту</a>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Стандартные якоря #id подсвечивают целевой элемент. Текстовые фрагменты #:~:text=... указывают на конкретную строку текста. ::target-text позволяет настраивать стиль этого автоматического выделения (обычно это жёлтая подсветка от браузера), чтобы он соответствовал дизайну.

💡 Ставьте высококонтрастные и ненавязчивые стили (background-color, color), чтобы выделение было заметно, но не мешало чтению.
💡 Не опирайтесь на ::target-text для критичных сценариев: пользователи могут открыть страницу без текстового фрагмента в URL, а поддержка в некоторых браузерах отсутствует.
💡 Комбинируйте с анимацией/переходом, если хотите плавное затухание выделения: transition: background-color .5s ease.