• 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;
  • }
  • 相关阅读:
    创米云无代码开发:连接CRM、用户运营、广告推广,实现电商平台的高效集成
    ArrayList源码
    基于智能合约的银行借贷方案设计与实现
    语法篇JQuery基础
    ssh服务
    Docker面试整理-如何进行Docker镜像的构建和发布?
    vue中动态设置source标签
    为后续的PCBA生产更为顺畅,这篇盖/露PAD怎么选的文章不容错过
    一个简单的HTML网页(千与千寻电影) 大二学生网页设计与制作 电影主题网页制作
    JavaScript之PC端网页特效(55th)
  • 原文地址:https://blog.csdn.net/m0_74149462/article/details/133552733