如何使用邊框底部動畫鏈接下劃線，以便鏈接文本和下劃線之間有空格？

如何使用邊框底部使鏈接下劃線動畫，以便文本和下劃線之間有空格？如何使用邊框底部動畫鏈接下劃線，以便鏈接文本和下劃線之間有空格？

我知道如何做到這一點，以便默認的文字修飾元素是動畫。但我想在鏈接和下劃線之間留出空間，這就是爲什麼我認爲我需要使用border-bottom。但我無法通過過渡動畫獲取邊框底部的作品。我怎麼能這樣做？我試圖尋找其他解決方案，但找不到任何解決方案。謝謝！

h2 > a { 
    position: relative; 
    color: #000; 
    text-decoration: none; 
} 

h2 > a:before { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 2px; 
    bottom: 0; 
    left: 0; 
    background-color: #000; 
    visibility: hidden; 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
    -webkit-transition: all 0.3s ease-in-out 0s; 
    transition: all 0.3s ease-in-out 0s; 
} 

h2 > a:hover:before { 
    visibility: visible; 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
}

來源

2017-06-21 userden

您呈現的代碼使用僞元素而不是默認文本修飾。由於僞元素被絕對定位，所以您可以輕鬆地改變距離。更改a:before底部-5px或任何負值適合您需要的距離：

a { 
 
    position: relative; 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 2px; 
 
    bottom: -5px; 
 
    left: 0; 
 
    background-color: #000; 
 
    visibility: hidden; 
 
    -webkit-transform: scaleX(0); 
 
    transform: scaleX(0); 
 
    -webkit-transition: all 0.3s ease-in-out 0s; 
 
    transition: all 0.3s ease-in-out 0s; 
 
} 
 

 
a:hover:before { 
 
    visibility: visible; 
 
    -webkit-transform: scaleX(1); 
 
    transform: scaleX(1); 
 
}

<a href="#">Long long text</a>

來源

2017-06-21 10:28:23

你可以僞造通過後臺和背景大小的動畫邊框：

a { 
 
    padding-bottom: 5px; 
 
    /* set here size + gap size from text */ 
 
    background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat; 
 
    background-size: 0px 3px; 
 
    transition: 0.5s; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    background-size: 100% 3px; 
 
} 
 

 
a[class] { 
 
    color: gray; 
 
} 
 

 
a.tst { 
 
    color: purple; 
 
    background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat, linear-gradient(0deg, turquoise, turquoise) center calc(100% - 2px) no-repeat; 
 
    background-size: 0px 2px; 
 
} 
 

 
a.tst:hover { 
 
    background-size: 100% 2px; 
 
}

<a href>kake animated border</a> 
 
<a href class> why currentcolor ?</a> 
 
<a href class="tst">mix of colors ?</a>

來源

2017-06-21 10:34:34

如何使用邊框底部動畫鏈接下劃線，以便鏈接文本和下劃線之間有空格？

回答

相關問題