Css display: contents; causes underline stop working-CodePudding

I have an unordered list with a few list elements inside of it. in each list element, we have ankers.

Expected result On hover to the Anker, the expected behavior is to add underline to the Anker

Actual result On hover to the Anker, the underline is not being added to the Anker.

HTML

<ul>
  <li>bla bla bla <a>underline text </a> bla bla bla</li>
</ul>

CSS

ul li {
display: flex;
align-items: flex-start;
grid-gap: 14px;
gap: 14px;
font-size: 18px;
line-height: 1.61; }

a {
color: #00829a;
text-decoration: none;
font-weight: 500;
display: contents; }

a:hover {
text-decoration: underline; }

Does anyone know why it happens and how to fix it? I have tried to add display: revert; to the a: hover but it breaks all CSS.

CodePudding user response：

You can just remove the display: content property. And it should work. Like this :

CSS

ul li {
            display: flex;
            align-items: flex-start;
            grid-gap: 14px;
            gap: 14px;
            font-size: 18px;
            line-height: 1.61;
        }

        a {
            color: #00829a;
            text-decoration: none;
            font-weight: 500;
            display: contents;
        }

        a:hover {
            text-decoration: underline;
        }

CodePudding user response：

All you have to do is change css display value to inline-block.

ul li {
  display: flex;
  align-items: flex-start;
  grid-gap: 14px;
  gap: 14px;
  font-size: 18px;
  line-height: 1.61; }
  
  a {
  color: #00829a;
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
}
  
  a:hover {
  text-decoration: underline;
 }

<ul>
        <li>bla bla bla <a href="#">underline text </a> bla bla bla</li>
    </ul>