css text-decoration 实现导航条功能

• #css

如下是一个非常常见的导航条功能，在今天之前我都是使用 ::after 伪类选择器实现，昨天写完 text-decoration 文章之后，发现 text-decoration 也能实现这个功能，而且更简单。

完整代码如下：

<style>
    .nav-list {
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 20px;
        background-color: aliceblue;
        height: 40px;
        padding: 10px 20px;
    }

    .nav-item:hover {
        text-decoration: underline #01a699 3px;
        text-underline-offset: 10px;
        cursor: pointer;
    }

    .nav-item:has(input[name="nav"]:checked) {
        color: #01a699;
        text-decoration: underline #01a699 3px;
        text-underline-offset: 10px;
    }
</style>

<div class="nav-list">
    <label for="nav-item-design" class="nav-item">
        设计
        <input type="radio" id="nav-item-design" name="nav" style="display: none;" checked>
    </label>
    <label for="nav-item-develop" class="nav-item">
        开发
        <input type="radio" id="nav-item-develop" name="nav" style="display: none;">
    </label>
    <label for="nav-item-document" class="nav-item">
        文档
        <input type="radio" id="nav-item-document" name="nav" style="display: none;">
    </label>
</div>

↶ 返回首页 ↶