Recently, I've been working on customizing Bootstrap 4's .btn-link by adding a special hover effect - a line that smoothly transitions from left to right beneath the link when the mouse hovers over it.
Although things are mostly going according to plan, I've encountered a snag when dealing with a button that has a dropdown feature, like this:
<button class="btn btn-link shadow-none text-decoration-none dropdown-toggle" type="button" id="price-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
price
In this situation, the dropdown arrow appears below the text. How can I go about resolving this issue? Any suggestions would be greatly appreciated.
Below is the CSS code I'm currently using:
.btn-link {
position: relative;
display: inline-block;
cursor: pointer;
}
.btn-link,
.btn-link:active,
.btn-link:focus,
.btn-link:hover {
color: inherit;
text-decoration: none;
}
.btn-link::after {
content: "";
position: absolute;
}
.btn-link::after {
top: 100%;
height: 3px;
width: 0%;
left: 5%;
background-color: rgb(41, 185, 153, 0.6);
transition: 0.5s ease all 0s;
}
.btn-link:hover:after {
width: 90%;
transition: 0.3s ease all;
}
UPDATE:
I made a modification changing ::after to ::before, but now the alignment of the accordion image seems off.