I want a border under the li, but the border is taking up the full width. Is there a way to add a border bottom which doesn't takes the full width of li
.aboutusNav a {
text-decoration: none;
font-weight: normal;
color: black
}
.aboutusNav {
border-bottom: 3px solid transparent;
display: inline-block;
}
.aboutusNav:hover {
border-bottom: 3px solid #EB644C;
}
<ul>
<li ><a>AboutUs</a></li>
</ul>
CodePudding user response:
Perhaps try use a pseudo element ::before
or ::after
as the border, style it as needed and add a transition.
This example uses ::before
just so that if ::after
is also added later for another effect, its natural position is stacked on top of ::before
. But it seems that using either ::before
or ::after
would not make a significant difference in this use case alone.
Example:
.aboutusNav a {
text-decoration: none;
font-weight: normal;
color: black;
}
.aboutusNav {
display: inline-block;
position: relative;
cursor: pointer;
}
.aboutusNav::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 3px;
background-color: #eb644c;
transform-origin: center;
transform: scaleX(0);
transition: all 0.2s ease-in-out;
}
.aboutusNav:hover::before {
transform: scaleX(0.5);
}
<ul>
<li ><a>AboutUs</a></li>
</ul>