• a标签设置下划线动画


     

    1. class="friendlyLink">
    2. <div v-for="(value, key) in friendlyLinkObj" :key="key">
    3. <div>{{key}}:
    4. <a class="friendlyLink-a" :href="value" target="_blank"> {{ value }} a>div>
    5. div>
  • 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;
  • }
  • 相关阅读:
    【高级篇 / ZTNA】(7.0) ❀ 03. FortiGate 防火墙与 FortiClient EMS 连接 ❀ FortiGate 防火墙
    SOHO如何做外贸独立站?
    数据结构中的堆(Java)
    【C++】模板初阶 | STL简介
    (四)激光线扫描-光平面标定
    C++引用
    07-架构2023版-centos+docker部署Canal 实现多端数据同步
    HTTP/HTTPS | 青训营笔记
    基于simulink的超级电容,电池及DC motor充放电系统仿真
    揭秘Spring事务失效场景分析与解决方案
  • 原文地址:https://blog.csdn.net/m0_74149462/article/details/133552733