'Bootstrap 5 underlined text showing in iPhone

I am using Bootstrap version 5.1.3. I completed a project and when I check the mobile version via a real device(iPhone XS) all anchor tags (<a href="#">Something</a>) have underlined text. When I start the CSS I am using the below codes to remove underlined text.

a, a:link, a:hover, a:visited, a:focus-visible, a:active {
    color: inherit;
    text-decoration: none;
}

Whether I use this to remove underlined text it is there for iPhones. Not for Android mobiles.

Can anyone help me with this?

Thanks in advance

htmlcssunderline


Solution 1:[1]

text-decoration: none !important;

Use important hope this works well!

Thanks.

Solution 2:[2]

a, a:link, a:hover, a:visited, a:focus-visible, a:focus, a:active {
    color: inherit;
    text-decoration: none !important; 
}

hope this works well!

Solution 3:[3]

I am posting this if anyone facing the same.

There is a built-in class for text-decoration:none in Bootstrap 5.1.3. Using that solved the problem for me.

<a href="#" class="text-decoration-none">Anything</a>

Please use text-decoration-none for anchor class. That will solve your issue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ridham Golakiya
Solution 2
Solution 3 WP Learner

Related Questions