Перейти к основному содержанию Перейти к навигации по документации
Добавлено в 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>

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

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(), который мы используем, чтобы затем изменить непрозрачность альфа-канала.

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. Смешивайте и сочетайте, чтобы создавать уникальные стили ссылок.

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 утилит.

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