Bootstrap 5 underline default changed? - html

Question

In Bootstrap 4 i understand it set the default text-decoration to be none.
But using Bootstrap 5 if i just add a raw anchor tag it is now showing both the blue writing and underline.
I was looking to only show the undelrine upon hovering. Is this something bootstrap 5 changed in the release? I cannot find any documentation stating it.
Currently i use:
a {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: underline;
color: inherit
}
but this is also affecting any buttons as links e.g.
Answer

Answer 1

Yes, As of Bootstrap 5 alpha1 the migration docs state:
"Links are underlined by default (not just on hover), unless they’re part of specific components"
You could create a special class like this:
.text-underline-hover {
text-decoration: none;
}
.text-underline-hover:hover {
text-decoration: underline;
}
Link
Demo
Or, if you want it to apply to all anchors except for those that contain a class= attribute use:
a:not([class]) {
text-decoration: none;
}
a:not([class]):hover {
text-decoration: underline;
}
This will not effect btn, only links without class will underline on hover.

Answer 2

All-in-one solution
This CSS code for Bootstrap 5 won't underline your <a ...> links (unless hovered over):
even if they have another class like mb-4 etc
unless they have the btn class, in which case they stay untouched.
Code to copy paste into your CSS file:
/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not([class*="btn"]) {
text-decoration: none;
}
a:not([class*="btn"]):hover {
text-decoration: underline;
}
Proof:
/* Simulate Bootstrap 5 CSS */
a {
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
a.btn {
text-decoration: none;
border: 1px solid #ccc;
}
a.btn:hover {
text-decoration: none;
border: 1px solid #ccc;
background-color: #ccc;
}
/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not([class*="btn"]) {
text-decoration: none;
}
a:not([class*="btn"]):hover {
text-decoration: underline;
}
An a link without class<br/>
<br/>
An a link with class cool<br/>
<br/>
An a link with class btn

Answer 3

As the default anchor is now underlined, defining custom CSS rules is tricky as these rules will interfere with components (for example navbars, dropdowns, ...).
The official solution i think will be using .text-decoration-none on all the anchors. It's a bit annoying but it's explicit and, we all hope, future-proof. :)

Answer 4

Your <a> tag also has the btn class that's why you get this behaviour.
class="btn btn-outline-dark mr-2 py-0"
Because buttons in bootstrap also has btn class. That's why with your CSS.
a:hover {
text-decoration: underline;
color: inherit
}
All the buttons with class btn also becomes underlined.
Solution:
Just remove btn btn-outline-dark from <a> and use custom class to style it.
Answer