Enlace (Link)
Las utilidades de enlaces se utilizan para estilizar tus anclas para ajustar su color, opacidad, desplazamiento de subrayado (underline offset), color de subrayado y más.
Opacidad del enlace (Link opacity)
Cambia la opacidad alfa del valor de color rgba() del enlace con utilidades. Ten en cuenta que los cambios en la opacidad de un color pueden dar lugar a enlaces con un contraste insuficiente.
<p><a class="link-opacity-10" href="#">Opacidad del enlace 10</a></p>
<p><a class="link-opacity-25" href="#">Opacidad del enlace 25</a></p>
<p><a class="link-opacity-50" href="#">Opacidad del enlace 50</a></p>
<p><a class="link-opacity-75" href="#">Opacidad del enlace 75</a></p>
<p><a class="link-opacity-100" href="#">Opacidad del enlace 100</a></p>Incluso puedes cambiar el nivel de opacidad al pasar el cursor (hover).
Opacidad del enlace al pasar el cursor 10
Opacidad del enlace al pasar el cursor 25
Opacidad del enlace al pasar el cursor 50
<p><a class="link-opacity-10-hover" href="#">Opacidad del enlace al pasar el cursor 10</a></p>
<p><a class="link-opacity-25-hover" href="#">Opacidad del enlace al pasar el cursor 25</a></p>
<p><a class="link-opacity-50-hover" href="#">Opacidad del enlace al pasar el cursor 50</a></p>
<p><a class="link-opacity-75-hover" href="#">Opacidad del enlace al pasar el cursor 75</a></p>
<p><a class="link-opacity-100-hover" href="#">Opacidad del enlace al pasar el cursor 100</a></p>Subrayados de enlaces (Link underlines)
Color de subrayado (Underline color)
Cambia el color del subrayado independientemente del color del texto del enlace.
<p><a href="#" class="link-underline-primary">Subrayado Primary</a></p>
<p><a href="#" class="link-underline-secondary">Subrayado Secondary</a></p>
<p><a href="#" class="link-underline-success">Subrayado Success</a></p>
<p><a href="#" class="link-underline-danger">Subrayado Danger</a></p>
<p><a href="#" class="link-underline-warning">Subrayado Warning</a></p>
<p><a href="#" class="link-underline-info">Subrayado Info</a></p>
<p><a href="#" class="link-underline-light">Subrayado Light</a></p>
<p><a href="#" class="link-underline-dark">Subrayado Dark</a></p>Desplazamiento del subrayado (Underline offset)
Cambia la distancia del subrayado desde el texto. El desplazamiento se establece en unidades em para escalar automáticamente con el font-size actual del elemento.
<p><a href="#">Enlace predeterminado</a></p>
<p><a class="link-offset-1" href="#">Enlace con desplazamiento 1</a></p>
<p><a class="link-offset-2" href="#">Enlace con desplazamiento 2</a></p>
<p><a class="link-offset-3" href="#">Enlace con desplazamiento 3</a></p>Opacidad del subrayado (Underline opacity)
Cambia la opacidad del subrayado. Requiere agregar .link-underline para establecer primero un color rgba() que luego usamos para modificar la opacidad alfa.
<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Opacidad de subrayado 0</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Opacidad de subrayado 10</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Opacidad de subrayado 25</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Opacidad de subrayado 50</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Opacidad de subrayado 75</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Opacidad de subrayado 100</a></p>Variantes de hover (Hover variants)
Al igual que las utilidades .link-opacity-*-hover, las utilidades .link-offset y .link-underline-opacity incluyen variantes :hover por defecto. Combínalas a tu gusto para crear estilos de enlaces únicos.
<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
Opacidad de subrayado 0
</a>Enlaces de colores (Colored links)
Los ayudantes de enlaces coloreados (colored links) se han actualizado para combinarse con nuestras utilidades de enlaces. Usa las nuevas utilidades para modificar la opacidad del enlace, la opacidad del subrayado y el desplazamiento del subrayado.
<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace Primary</a></p>
<p><a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace Secondary</a></p>
<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace Success</a></p>
<p><a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace Danger</a></p>
<p><a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace Warning</a></p>
<p><a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace Info</a></p>
<p><a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace Light</a></p>
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Enlace Dark</a></p>
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Enlace de énfasis</a></p>Consejo de accesibilidad: El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como los lectores de pantalla. Asegúrate de que el significado sea obvio a partir del propio contenido (por ejemplo, el texto visible con un suficiente contraste de color) o se incluya a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.
CSS
Además de la siguiente funcionalidad de Sass, considera leer sobre nuestras propiedades personalizadas CSS (también conocidas como variables CSS) incluidas para colores y más.
API de utilidades de Sass
Las utilidades de enlaces se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.
"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
),
),