如何使下，當鏈接點擊

-1

link1 link2 link3

當鏈接1點擊

link1 link2 link3 

    _____

點擊鏈接2時假下劃線

link1 link2 link3 

      _____

我見這種類型在不同的網站，但搜索後無法找到。我發現這一個https://medium.com/@dave_lunny/stylish-a-styling-e80c80cbc30e，但想知道我發佈的一個可以由鏈接中的一個。

來源

2017-07-15 Saurabh Kumar

你嘗試過什麼碼這是你正在尋找的實際效果？是的，這可以通過各種方法從一個標籤完成。沒有任何代碼和一個明確的問題，你會得到downvoted /關閉，並得到答案的猜測。有可能在這裏有一些重複:( –

是的，請參閱https://tympanus.net/codrops/2013/08/06/creative-link-effects/和演示在這裏https://tympanus.net/Development/CreativeLinkEffects /這應該適合你的問題:) –

下邊框

一個簡單的解決方案是在<a>標籤使用border-bottom。

僞元素

在你的鏈接該解決方案採用僞元素。它在那裏解釋;這裏是從解釋的結果，只是顛倒寬度：

a { 
 
    color: #0000ee; 
 
    display: inline-block; 
 
    position: relative; 
 
    text-decoration: none; 
 
} 
 

 
a:before { 
 
    background-color: #0000ee; 
 
    content: ''; 
 
    height: 2px; 
 
    position: absolute; 
 
    bottom: -1px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    transition: width 0.3s ease-in-out; 
 
    width: 0%; 
 
} 
 

 
a:hover:before { 
 
    width: 100%; 
 
}

<a href="http://www.stackoverflow.com">Stackoverflow</a> 
 
<a href="http://www.stackoverflow.com">Stackoverflow</a> 
 
<a href="http://www.stackoverflow.com">Stackoverflow</a>

來源

2017-07-15 17:41:09 lynx

當添加active類或focus事件時，您可以使用border-bottom: 1px solid #ccc;。

來源

2017-07-15 17:35:28 Santosh

如何使下，當鏈接點擊

回答

相關問題