Bootstrap 5 underline default changed?

Issue

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.

<a href="{% url 'answer-create' question.id %}" class="btn btn-outline-dark mr-2 py-0">Answer</a>

Solution

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;
}

<a href="#" class="text-underline-hover">Link</a>

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.

Answered By - Zim