.panel {
    align-items: center;
    text-align: center;
    max-width: 500px;
    max-height: 300px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.panel>* {
    margin-bottom: 100px;
}

a {
    position: relative;
    color: rgb(15, 0, 180);
    /* 设置元素为相对定位，为伪元素提供定位上下文 */
    display: inline-block;
    /* 让元素包裹文本内容，以实现文字下划线 */
}

a:before {
    content: "";
    /* 生成一个伪元素 */
    position: absolute;
    /* 设置伪元素为绝对定位，相对于包含块 */
    top: 25px;
    left: 0;
    /* 将伪元素的左边距设置为0，以实现从左到右的运动效果 */
    width: 0;
    /* 将伪元素的宽度设置为0，初始时不可见 */
    height: 3px;
    /* 设置伪元素的高度为2像素，作为下划线的宽度 */
    background-color: rgb(15, 0, 180);
    /* 设置下划线的颜色为黑色 */
    transition: width 0.3s;
    /* 使用过渡动画实现从0到100%宽度的效果 */
}

a:hover:before {
    width: 100%;
    /* 悬停时将伪元素的宽度设置为100%，显示完整的下划线 */
}

a:hover {
    cursor: pointer;
}