有没有办法background-position取出百分比值？目前我的按钮仅适用于一个明确的价值观width和background-position.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: white;
font-weight: bold;
width: 350px;
height: 50px;
border: 1px solid green;
transition: background 0.5s;
background-repeat: no-repeat;
background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
}
.button-pixel {
background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
background-position: 0px 0px, 350px 0px;
}
.button-percentage …我在链接下有一条动画线。它适用于单行链接，但我有一些用换行符分隔的链接<br>
有没有办法让动画下划线沿着链接的所有行出现？谢谢
body {
padding: 20px;
font-family: Helvetica;
}
a {
font-weight: bold;
color: black;
position: relative;
text-decoration: none;
}
a::before {
content: "";
position: absolute;
width: 0%;
height: 2px;
bottom: 0;
background-color: #000;
transition: all 0.2s;
}
a:hover::before {
width: 100%;
}<a href="">my link</a>
<br><br>
<a href="">this is<br>a much<br>longer link</a>我正在探索 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;
}<span class="un">Underlined Text</span>但我不确定如何在 Tailwind 中应用这种转换。