鏈接的點擊面積增加也會增加文本的下劃線

我正在嘗試增加菜單中鏈接的點擊區域，但這樣做也會增加文本的下劃線效果。我試過填充和寬度但沒有改進。我想要一個效果，就像highfive移動菜單中出現的效果（從左下劃線）。這裏是fiddle和下面是代碼
鏈接的點擊面積增加也會增加文本的下劃線

.hvr-underline-from-left { 
 
text-decoration:none; 
 
padding: 3px 0; 
 
color: #000; 
 
cursor: pointer; 
 

 
    display: inline-block; 
 
    vertical-align: middle; 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.hvr-underline-from-left:before { 
 
    
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    left: 0; 
 
    
 
    right: 100%; 
 
bottom : 7px; 
 
    background: #E13F3F; 
 
    height: 2px; 
 
    -webkit-transition-property: right; 
 
    transition-property: right; 
 
    -webkit-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
    -webkit-transition-timing-function: ease-out; 
 
    transition-timing-function: ease-out; 
 
} 
 
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before { 
 
    right: 0; 
 
}

<html> 
 
    <body> 
 
    <a class="hvr-underline-from-left" href="#">About </a> 
 
    </body> 
 
</html>

來源

2015-11-11 Irshad

您可以在a - 標籤中添加一個span裝上跨度下劃線效果來代替。這樣，您可以將填充添加到鏈接元素，而不影響下劃線效果。

a { 
 
    padding: 20px; 
 
    display: inline-block; 
 
    background: #eee; 
 
} 
 

 
.hvr-underline-from-left { 
 
    text-decoration: none; 
 
    padding: 3px 0; 
 
    color: #000; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.hvr-underline-from-left:before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    left: 0; 
 
    right: 100%; 
 
    bottom: 7px; 
 
    background: #E13F3F; 
 
    height: 2px; 
 
    -webkit-transition-property: right; 
 
    transition-property: right; 
 
    -webkit-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
    -webkit-transition-timing-function: ease-out; 
 
    transition-timing-function: ease-out; 
 
} 
 

 
a:hover .hvr-underline-from-left:before, 
 
.hvr-underline-from-left:focus:before, 
 
.hvr-underline-from-left:active:before { 
 
    right: 0; 
 
}

<html> 
 

 
<body> 
 
    <a href="#"><span class="hvr-underline-from-left">About</span></a> 
 
</body> 
 

 
</html>

來源

2015-11-11 10:45:08

謝謝您的回答。這太容易了，但我無法得到它。呵呵謝謝。 :) – Irshad

沒問題，很高興幫助:) –

有人，我可以記住，作爲我的第一個問題的問題解決者。只是說。：d – Irshad

鏈接的點擊面積增加也會增加文本的下劃線

回答

相關問題