CODEWITHSUNDEEP
htmlcssbootstrap-4
Andrew Zaw
Andrew Zaw

Reputation: 814

Bootstrap Collapse Text Decoration

For the Bootstrap Collapse Component, I have a question regarding the "Accordion example". I wish to remove the underline from the text "Collapsible Group Item" 1-3 when they are in use. They are by default not underlined, and then when moused over, they are underlined. This is modifiable by doing:

btn-link:{
text-decoration: none;
}

However, after clicking and moving the mouse away, the underline persists until something else is clicked. How would I remove the underline there? Check the link to see the behavior I am talking about.

Upvotes: 1

Views: 1118

Answers (5)

Ali
Ali

Reputation: 1336

Simple way: just add !important

.btn-link {
  text-decoration:none !important;
}

Fiddle

or you can use :focus for click and :hover for hovering, 

.btn-link:focus, .btn-link:hover {
    text-decoration: none;
}

Upvotes: 0

Mohammad Aslam
Mohammad Aslam

Reputation: 250

the issue seems like because of the pseudo class :focus you can overwrite the CSS of :focus like this.

.btn-link.focus, .btn-link:focus {
    text-decoration: none;
}

I hope this solves the issue.

Upvotes: 0

Mubasher Iqbal
Mubasher Iqbal

Reputation: 59

You need to add two style type for this 

.btn-link.focus, .btn-link:focus {
  text-decoration: none; //here is if you want to remove 
  box-shadow: none;
 }

and this

.btn-link:hover{
  text-decoration:none; //here is if you want to remove 
 }

Upvotes: 0

MrMaavin
MrMaavin

Reputation: 1741

You need to add two things:

To remove the hover underlining add:

.btn-link:hover{
  text-decoration:none;
}

And for the underlining after the click add:

.btn-link:focus{
  text-decoration:none;
}

Check out this example.

Upvotes: 0

Udhay Titus
Udhay Titus

Reputation: 5869

just add mouse hover for btn-link

.btn-link:hover, .btn-link, .btn-link:focus{
   text-decoration:none;
}

check the demo here

Upvotes: 4

Related Questions