I am creating list items that need to display:
- an underline
- of a different color
- only when hovered
- that is the same size of the word, not the entire lis item
- the items need to be spaced around
like in the picture attached
So far, I managed that with the following code:
(adding a span inside of the list item, and assigning it a "max-width: fit-content" on hover)
ul {
height: 40vh;
width: 40vw;
text-align: right;
display: flex;
flex-direction: column;
justify-content: space-around;
}
li {
display: flex;
flex-direction: column;
justify-content: space-around;
}
li span {
border-bottom: 4px solid white;
max-width: fit-content;
}
li span:hover {
border-bottom: 4px solid blue;
}<div>
<ul>
<li><span>Who we are</span></li>
<li><span>Brands</span></li>
<li><span>Careers</span></li>
<li><span>Contact</span></li>
</ul>
</div> The issue is that the ul has to be aligned to the right. Before adding the needed property of max-width: fit-content to the li span tags, the ul was aligning to the right, but then. After adding the fit-content property, the text-align: right stopped working.
On the console, there is no indication of the text-align property not being properly compiled.
How can I achieve the result of having the underline, of a different color, the same width as the text it is underlining, when hovered, while the entire ul is aligned to the right?
Thank you in advance for your help!
