Добавлено в v5.3 На GitHub

Ссылка

Утилиты ссылок используются для стилизации ваших якорей, чтобы настроить их цвет, непрозрачность, смещение подчеркивания, цвет подчеркивания и многое другое.

На этой странице

Непрозрачность ссылки

Измените альфа-прозрачность значения цвета ссылки rgba() с помощью утилит. Имейте в виду, что изменения непрозрачности цвета могут привести к ссылкам с недостаточной контрастностью.

html

<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>

Вы даже можете изменить уровень непрозрачности при наведении.

Непрозрачность при наведении ссылки 10

Непрозрачность при наведении ссылки 25

Непрозрачность при наведении ссылки 50

Непрозрачность при наведении ссылки 75

Непрозрачность при наведении ссылки 100

html

<p><a class="link-opacity-10-hover" href="#">Непрозрачность при наведении ссылки 10</a></p>
<p><a class="link-opacity-25-hover" href="#">Непрозрачность при наведении ссылки 25</a></p>
<p><a class="link-opacity-50-hover" href="#">Непрозрачность при наведении ссылки 50</a></p>
<p><a class="link-opacity-75-hover" href="#">Непрозрачность при наведении ссылки 75</a></p>
<p><a class="link-opacity-100-hover" href="#">Непрозрачность при наведении ссылки 100</a></p>

Подчеркивание ссылки

Цвет подчеркивания

Измените цвет подчеркивания независимо от цвета текста ссылки.

html

<p><a href="#" class="link-underline-primary">Primary underline</a></p>
<p><a href="#" class="link-underline-secondary">Secondary underline</a></p>
<p><a href="#" class="link-underline-success">Success underline</a></p>
<p><a href="#" class="link-underline-danger">Danger underline</a></p>
<p><a href="#" class="link-underline-warning">Warning underline</a></p>
<p><a href="#" class="link-underline-info">Info underline</a></p>
<p><a href="#" class="link-underline-light">Light underline</a></p>
<p><a href="#" class="link-underline-dark">Dark underline</a></p>

Смещение подчеркивания

Измените расстояние подчеркивания от вашего текста. Смещение задается в единицах em для автоматического масштабирования с текущим размером шрифта элемента font-size.

html

<p><a href="#">Ссылка по умолчанию</a></p>
<p><a class="link-offset-1" href="#">Смещение 1 ссылки</a></p>
<p><a class="link-offset-2" href="#">Смещение 2 ссылки</a></p>
<p><a class="link-offset-3" href="#">Смещение 3 ссылки</a></p>

Непрозрачность подчеркивания

Измените непрозрачность подчеркивания. Требуется добавить .link-underline, чтобы сначала установить цвет rgba(), который мы используем, чтобы затем изменить непрозрачность альфа-канала.

Непрозрачность подчеркивания 0

Непрозрачность подчеркивания 10

Непрозрачность подчеркивания 25

Непрозрачность подчеркивания 50

Непрозрачность подчеркивания 75

Непрозрачность подчеркивания 100

html

<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Непрозрачность подчеркивания 0</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Непрозрачность подчеркивания 10</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Непрозрачность подчеркивания 25</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Непрозрачность подчеркивания 50</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Непрозрачность подчеркивания 75</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Непрозрачность подчеркивания 100</a></p>

Варианты наведения

Как и утилиты .link-opacity-*-hover, утилиты .link-offset и .link-underline-opacity по умолчанию включают варианты :hover. Смешивайте и сочетайте, чтобы создавать уникальные стили ссылок.

Непрозрачность подчеркивания 0

html

<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
  Непрозрачность подчеркивания 0
</a>

Цветные ссылки

Вспомогательные функции для цветных ссылок были обновлены для работы с нашими утилитами для работы со ссылками. Используйте новые утилиты для изменения непрозрачности ссылки, непрозрачности подчеркивания и смещения подчеркивания.

html

<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>
<p><a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>
<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>
<p><a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>
<p><a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>
<p><a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>
<p><a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>
<p><a href="#" 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 утилит.

scss/_utilities.scss

"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
  ),
),