:root {
    .hover-border {
        position: relative;
        border: 1px solid transparent;
    }

    .hover-border:hover {
        border: 1px dashed #021556;
    }

    /* 使用伪元素添加标签 */
    .hover-border::before {
        content: "文本"; /* 标签内容 */
        position: absolute; /* 绝对定位 */
        top: -30px; /* 向上移动 */
        left: 0px; /* 向左偏移 */
        background-color: #021556; /* 背景色 */
        color: white; /* 文字颜色 */
        width: 50px;
        height: 25px;
        font-weight: 400;
        box-sizing: border-box;
        line-height: 25px;
        text-align: center;
        border-radius: 4px;
        font-size: 12px;
        opacity: 0; /* 默认不透明度为0，即不可见 */
        transition: opacity 0.3s; /* 平滑过渡效果 */
    }

    .hover-border:hover::before {
        opacity: 1; /* hover时变为完全不透明，显示出来 */
    }

    .active-border {
        border: 1px solid #021556;
    }

    .parent-top {
        padding-top: 30px;
    }

    .img-hover-border {
        position: relative;
    }

    /* 使用伪元素添加标签 */
    .img-hover-border::before {
        content: "卡片"; /* 标签内容 */
        position: absolute; /* 绝对定位 */
        top: 4px; /* 向上移动 */
        left: 0; /* 向左偏移 */
        background-color: #021556; /* 背景色 */
        color: white; /* 文字颜色 */
        width: 50px;
        height: 25px;
        font-weight: 400;
        box-sizing: border-box;
        line-height: 25px;
        text-align: center;
        border-radius: 4px;
        font-size: 12px;
        opacity: 0; /* 默认不透明度为0，即不可见 */
        transition: opacity 0.3s; /* 平滑过渡效果 */
    }

    .img-hover-border:hover::before {
        opacity: 1; /* hover时变为完全不透明，显示出来 */
    }
}