CSS

Выделение текста в CSS с помощью ::selection

Очень часто выделение текста используют для удобства при чтении, при копировании.

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

Такой прием будет выгодно смотреться на любом сайте. Главное верно подобрать цвета, чтобы выделение выглядело стильно и современно. 

Не нужно перегружать сайт лишними скриптами и библиотеками, CSS открывает обширные возможности для стилизации. Можно стилизовать выделение текста просто и быстро с помощью псевдо-элемента ::selection

Самый простой пример

1
p::selection {color: #fff;background-color: yellow;}

Вот такой получается пример. выдели меня!

Псевдо-элемент ::selection поддерживает такие свойства как color, background, и text-shadow.

Это основные свойства которые могут пригодится для оформления выделенного текста статьи. 

Чтобы сделать более интересные эффекты при выделении текста, необходимо будет использовать свойство content: attr(data-content);

То есть поможет обращение к data- атрибуту. 

Подробнее в статье про выделение текста с помощью  data-content. 

Добавить комментарий