从左到右悬停时加下划线

Question

从左到右悬停时加下划线

我正在探索 Tailwind，当我需要从左到右悬停时显示下划线时，我陷入了困境。

在普通 CSS 中，它会是这样的：

    .un {
      display: inline-block;
      padding-bottom:2px;
      background-image: linear-gradient(#000, #000);
      background-position: 0 100%; /*OR bottom left*/
      background-size: 0% 2px;
      background-repeat: no-repeat;
      transition:
        background-size 0.3s,
        background-position 0s 0.3s; /*change after the size immediately*/
    }
    
    .un:hover {
      background-position: 100% 100%; /*OR bottom right*/
      background-size: 100% 2px;
    }

Run Code Online (Sandbox Code Playgroud)

<span class="un">Underlined Text</span>

Run Code Online (Sandbox Code Playgroud)

但我不确定如何在 Tailwind 中应用这种转换。

Answer 1

and*_*dcl 5

试试这个（Tailwind v3）：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <a href="#" 
       class="relative before:content-[''] before:absolute before:block before:w-full before:h-[2px] 
              before:bottom-0 before:left-0 before:bg-black
              before:hover:scale-x-100 before:scale-x-0 before:origin-top-left
              before:transition before:ease-in-out before:duration-300"
    >
       Underlined Text
</a>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

干杯。

归档时间：	3 年，11 月前
查看次数：	3677 次
最近记录：	3 年，4 月前