Ссылка
Утилиты ссылок используются при стилизации якорей, - для настройки цвета, непрозрачности, смещения подчеркивания, цвета подчеркивания и многого другого.
Непрозрачность ссылки
Измените альфа-прозрачность значения цвета ссылки rgba() с помощью утилит. Имейте в виду, что изменения непрозрачности цвета могут привести к ссылкам с недостаточной контрастностью.
<p><aclass="link-opacity-10"href="#">Link opacity 10</a></p><p><aclass="link-opacity-25"href="#">Link opacity 25</a></p><p><aclass="link-opacity-50"href="#">Link opacity 50</a></p><p><aclass="link-opacity-75"href="#">Link opacity 75</a></p><p><aclass="link-opacity-100"href="#">Link opacity 100</a></p>Вы даже можете изменить уровень непрозрачности при наведении.
Непрозрачность при наведении ссылки 10
Непрозрачность при наведении ссылки 25
Непрозрачность при наведении ссылки 50
<p><aclass="link-opacity-10-hover"href="#">Непрозрачность при наведении ссылки 10</a></p><p><aclass="link-opacity-25-hover"href="#">Непрозрачность при наведении ссылки 25</a></p><p><aclass="link-opacity-50-hover"href="#">Непрозрачность при наведении ссылки 50</a></p><p><aclass="link-opacity-75-hover"href="#">Непрозрачность при наведении ссылки 75</a></p><p><aclass="link-opacity-100-hover"href="#">Непрозрачность при наведении ссылки 100</a></p>Подчеркивание ссылки
Цвет подчеркивания
Измените цвет подчеркивания независимо от цвета текста ссылки.
<p><ahref="#"class="link-underline-primary">Primary underline</a></p><p><ahref="#"class="link-underline-secondary">Secondary underline</a></p><p><ahref="#"class="link-underline-success">Success underline</a></p><p><ahref="#"class="link-underline-danger">Danger underline</a></p><p><ahref="#"class="link-underline-warning">Warning underline</a></p><p><ahref="#"class="link-underline-info">Info underline</a></p><p><ahref="#"class="link-underline-light">Light underline</a></p><p><ahref="#"class="link-underline-dark">Dark underline</a></p>Смещение подчеркивания
Измените расстояние подчеркивания от вашего текста. Смещение задается в единицах em для автоматического масштабирования с текущим размером шрифта элемента font-size.
<p><ahref="#">Ссылка по умолчанию</a></p><p><aclass="link-offset-1"href="#">Смещение 1 ссылки</a></p><p><aclass="link-offset-2"href="#">Смещение 2 ссылки</a></p><p><aclass="link-offset-3"href="#">Смещение 3 ссылки</a></p>Непрозрачность подчеркивания
Измените непрозрачность подчеркивания. Требуется добавить .link-underline, чтобы сначала установить цвет rgba(), который мы используем, чтобы затем изменить непрозрачность альфа-канала.
Непрозрачность подчеркивания 0
Непрозрачность подчеркивания 10
Непрозрачность подчеркивания 25
Непрозрачность подчеркивания 50
<p><aclass="link-offset-2 link-underline link-underline-opacity-0"href="#">Непрозрачность подчеркивания 0</a></p><p><aclass="link-offset-2 link-underline link-underline-opacity-10"href="#">Непрозрачность подчеркивания 10</a></p><p><aclass="link-offset-2 link-underline link-underline-opacity-25"href="#">Непрозрачность подчеркивания 25</a></p><p><aclass="link-offset-2 link-underline link-underline-opacity-50"href="#">Непрозрачность подчеркивания 50</a></p><p><aclass="link-offset-2 link-underline link-underline-opacity-75"href="#">Непрозрачность подчеркивания 75</a></p><p><aclass="link-offset-2 link-underline link-underline-opacity-100"href="#">Непрозрачность подчеркивания 100</a></p>Варианты наведения
Как и утилиты .link-opacity-*-hover, утилиты .link-offset и .link-underline-opacity по умолчанию включают варианты :hover. Смешивайте и сочетайте, чтобы создавать уникальные стили ссылок.
<aclass="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover"href="#"> Непрозрачность подчеркивания 0
</a>Цветные ссылки
Вспомогательные функции для цветных ссылок были обновлены для работы с нашими утилитами для работы со ссылками. Используйте новые утилиты для изменения непрозрачности ссылки, непрозрачности подчеркивания и смещения подчеркивания.
<p><ahref="#"class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p><p><ahref="#"class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p><p><ahref="#"class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p><p><ahref="#"class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p><p><ahref="#"class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p><p><ahref="#"class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p><p><ahref="#"class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p><p><ahref="#"class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p><p><ahref="#"class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>.visually-hidden.
CSS
В дополнение к следующим функциям Sass, рассмотрите возможность прочитать о наших включенных пользовательских свойствах CSS (также известных как переменные CSS) для цветов и многого другого.
Sass API утилиты
Утилиты ссылок объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.
"link-opacity":(css-var:true,class:link-opacity,state:hover,values:(10:.1,25:.25,50:.5,75:.75,100:1)),"link-offset":(property:text-underline-offset,class:link-offset,state:hover,values:(1:.125em,2:.25em,3:.375em,)),"link-underline":(property:text-decoration-color,class:link-underline,local-vars:("link-underline-opacity":1),values:map-merge($utilities-links-underline,(null:rgba(var(--#{$prefix}link-color-rgb),var(--#{$prefix}link-underline-opacity,1)),))),"link-underline-opacity":(css-var:true,class:link-underline-opacity,state:hover,values:(0:0,10:.1,25:.25,50:.5,75:.75,100:1),),