悬停下划线不显示

Question

我试图在悬停时在每个元素下创建一个带有下划线效果的导航栏。出于某种原因，悬停效果没有出现，我不知道是我的代码有问题还是浏览器有问题，我不知道如何修复它。问题是 ".underline_indicators" class

我正在学习最新的 freeCodeCamp 创建网页设计系统的课程，完全按照代码进行操作，但仍然无法正常工作。非常感谢任何帮助！

这是我的代码片段：

 ul{
        display: flex; 
        list-style: none;
    }

    a {
        color: black;
        text-decoration: none;
    }
    
    .underline-indicators > * {
        padding: 1rem;
        border: 0;
        cursor: pointer;
        border-bottom: .2rem solid white;
    }

    .underline-indicators > *:hover,
    .underline-indicators > *:focus {
        border-color: black;
    }

    .underline-indicators > .active {
        border-color: black;
    }

 <html>
    <head>
        <link rel="stylesheet" href="underline.css">
    </head>
    <body>
        <nav>
            <ul class="underline-indicators">
                <li class="active"><a href="#">00</a></li>
                <li><a href="#">01</a></li>
                <li><a href="#">02</a></li>
            </ul>
        </nav>
    </body>
    </html>

Answer 1

使用您提供给我们的代码不起作用。但是，如果您在 <html> 标记之前添加 <!DOCTYPE html> 作为 Doctype 声明，它就可以正常工作。代码片段有效，因为在 iframe 中添加了 Doctype。我想，CSS 没有它就无法验证。

https://www.w3.org/QA/Tips/Doctype

悬停下划线不显示

Hover underline not showing

html

css

underline