a标签设置下划线动画

 

 

        

            
{{key}}:
                 {{ value }} 
        
    

friendlyLinkObj: {
    csdn: "link...",    
    github: "link..."
}



        /* 基础样式 */
        a {
            position: relative;
            color: #333;
            text-decoration: none;
        }

        /* 伪类样式 */
        a::before {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #333;
            opacity: 0;
            transition: all 0.5s ease-in-out;
        }

        /* 悬停样式 */
        a:hover::before {
            width: 100%;
            opacity: 1;
        }