New css variable option for link underlines

[AgentSmith0]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the contributing guidelines

Proposal

What about a variable for enabling/disabling the link underline? https://twbs-bootstrap.netlify.app/docs/5.1/customize/options/

Motivation and context

Many pages disable the underline on links and have link highlighting only by color. With this option this could be easily customized.

[crftwrk]

Variables already exist. Use this to remove underline from links & hover:

// Style anchor elements.
$link-decoration:       none !default;
$link-hover-decoration: none !default;

[AgentSmith0]

@crftwrk Thanks, but these variables aren't accessible through css, are they?

[mdo]

@crftwrk Thanks, but these variables aren't accessible through css, are they?

No, and neither are the options you linked to in the original comment. We currently don't have any CSS-specific options, they're all Sass based.

[iforrest-levelaccess]

Many pages disable the underline on links and have link highlighting only by color.

As a general rule, this will introduce accessibility issues to your website. It violates WCAG 2.1 Level A.

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

https://www.w3.org/TR/WCAG20-TECHS/F73.html

[Supportic]

Technically you could define css-variables and modify/overwrite them. e.g. already used in buttons https://getbootstrap.com/docs/5.2/components/buttons/#variables

Proposal:

// Style anchor elements.
$link-decoration:       var(--#{$prefix}link-decoration) !default;
$link-hover-decoration: var(--#{$prefix}link-hover-decoration) !default;

[AgentSmith0]

@mdo Could we convert the link decoration variable to a css variable, like in the comment by @Supportic? This would allow to disable the link underline or customize it easily.

[mdo]

This would likely be tackled in v5.3.0 at the soonest if we do it as it'd constitute a new feature :).

[AgentSmith0]

Any updates on this?

[louismaximepiton]

It seems that the dark mode PR brang a solution to this problem introducing --bs-link-decoration and --bs-link-hover-decoration at the :root level. Is that what you had in mind ?

[AgentSmith0]

Yes, I didn't know it was already added, but it seems like a tags and btn-link class do not use this variable currently. The variable is currently unused.