Автор: Очень часто выделение текста используют для удобства при чтении, при копировании.
Чтобы заинтересовать пользователя и привлечь его внимание, можно кастомизировать цвет выделения текста.
Такой прием будет выгодно смотреться на любом сайте. Главное верно подобрать цвета, чтобы выделение выглядело стильно и современно.
Не нужно перегружать сайт лишними скриптами и библиотеками, CSS открывает обширные возможности для стилизации. Можно стилизовать выделение текста просто и быстро с помощью псевдо-элемента ::selection
Самый простой пример
1 | p::selection {color: #fff;background-color: yellow;} |
Вот такой получается пример. выдели меня!
Псевдо-элемент ::selection поддерживает такие свойства как color, background, и text-shadow.
Это основные свойства которые могут пригодится для оформления выделенного текста статьи.
Чтобы сделать более интересные эффекты при выделении текста, необходимо будет использовать свойство content: attr(data-content);
То есть поможет обращение к data- атрибуту.
Подробнее в статье про выделение текста с помощью data-content.
