Bootstrap 5 underlined text showing in iPhone-CodePudding

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

CodePudding user response：

text-decoration: none !important;

Use important hope this works well!

Thanks.

CodePudding user response：

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

hope this works well!

CodePudding user response：

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="#" >Anything</a>

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