下划线动画

2023/6/10

本文是一个使用 CSS ::before 伪类实现 (使用 ::after 效果相同) 的下划线动画。

首先，在需要添加动画的元素添加 position 属性

.target-element {
    position: relative;
}

接着实现伪类，

.target-element::before {
    /* 这两行代码是为了让伪类成为 block 元素 */
    display: block;
    content: " ";
    /* 添加 absolute 定位 */
    position: absolute;
    left: 0;
    bottom: 0;
    /* 伪类自身表现样式 */
    width: 0;
    border-bottom: solid 2px #333;
    /* 过渡动画控制 */
    transition: .3s;
}

再实现 hover 时的伪类表现效果：

.target-element:hover::before {
    width: 100%;
}

点此查看原文