.title_list  {
    li {
        display: flex;
        flex-direction: row;
        min-height: 50px;
        line-height: 50px;
    }

    .title {
        position: relative;
    }

    /* 定义伪元素用于绘制边框 */
    .title::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid transparent;
        box-sizing: border-box;
        /* 初始时不显示边框 */
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        pointer-events: none; /* 让鼠标事件穿透伪元素 */
    }

    /* 鼠标悬停时触发动画 */
    .title:hover::before {
        animation: drawBorder 0.8s linear forwards;
    }

    .date {
        text-align: right;
    }

    hr {
        margin: 0;
        border: 1px dashed var(--color-coffee);
    }
}

/* 定义顺时针绘制边框的动画 */
@keyframes drawBorder {
    0% {
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    25% {
        border-top-color: var(--color-coffee);
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    50% {
        border-top-color: var(--color-coffee);
        border-right-color: var(--color-coffee);
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    75% {
        border-top-color: var(--color-coffee);
        border-right-color: var(--color-coffee);
        border-bottom-color: var(--color-coffee);
        border-left-color: transparent;
    }
    100% {
        border-top-color: var(--color-coffee);
        border-right-color: var(--color-coffee);
        border-bottom-color: var(--color-coffee);
        border-left-color: var(--color-coffee);
    }
}