Figma文本下划线悬停效果转HTML/CSS遇阻，求解决方法

我在Figma中设计了一款基础的文本悬停效果——鼠标悬停时会显示下划线。但在将其转换为HTML/CSS代码时遇到问题：现有插件均不支持该悬停原型，使用插件转换后，悬停效果无法正常工作。请问如何顺利实现该悬停设计的完美转换？

不用依赖转换插件，直接手写HTML/CSS就能完美还原这个悬停效果，步骤简单可控：

• HTML结构
  根据文本的实际用途选择标签，示例如下：

  <!-- 作为可点击链接的情况 -->
  <a class="hover-underline" href="#">目标文本内容</a>
  
  <!-- 作为普通静态文本的情况 -->
  <span class="hover-underline">目标文本内容</span>
  

• CSS样式
  利用:hover伪类和伪元素控制下划线的显示，还能添加过渡动画匹配Figma的原型质感：

  .hover-underline {
    /* 还原Figma中的基础文本样式，按需调整 */
    font-family: "你的字体", sans-serif;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    position: relative;
  }
  
  .hover-underline::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px; /* 下划线粗细，对应Figma设计 */
    bottom: -2px; /* 下划线与文本的间距，按需调整 */
    left: 0;
    background-color: #000; /* 下划线颜色，匹配Figma */
    transition: width 0.3s ease; /* 平滑过渡动画，不需要可删除 */
  }
  
  .hover-underline:hover::after {
    /* 悬停时展开下划线 */
    width: 100%;
  }
  

• 细节匹配

  • 把font-family、font-size、color等属性替换成你在Figma中设置的参数
  • 调整height、bottom、background-color值，还原下划线的粗细、位置和颜色
  • 如果Figma里的下划线是瞬间显示而非平滑展开，删除transition属性即可

这种手动实现的方式完全不受插件限制，还能灵活调整细节，完美还原你的设计效果。

内容的提问来源于stack exchange，提问作者sphinx