懸停線下方的線

如何在鏈接下添加短行？該行只能在懸停時顯示。我嘗試使用border-bottom，但這種方式的線條是鏈接寬度的100％，我希望線條的長度比鏈接的短。懸停線下方的線

下面是我嘗試製作的效果示例圖像。

enter image description here

來源

2014-05-13 user2013488

向我們展示您嘗試過的東西。 – George

你想要顯示哪一行？在特定的字母下面？ –

標題接縫容易....好，這是意想不到的。 – Viscocent

您可以嘗試使用::after僞元素：

a { 
 
    position: relative; 
 
    text-decoration: none; 
 
} 
 

 
a:hover::after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 25%; 
 
    right: 25%; 
 
    bottom: 0; 
 
    border: 1px solid black; 
 
}

<a href='#'>Demo Link</a>

來源

2014-05-13 13:03:09

看來演示不起作用。當鏈接懸停時，我看不到一條線 – user2013488

您是否使用不支持僞元素的古代瀏覽器？ –

它現在工作正常，但它說邊界底部：1px是奇怪的，但行距至少可以看到2或3px – user2013488

只需使用這個類：

.link:hover { 
    background-image:url("YOUR-SMALL-LINE-BOTTOM.png") 
}

這樣的，當你將鼠標懸停在元素的行會出現。你可以在圖像中指定線條必須有多大或多少。

來源

2014-05-13 12:55:24 Xatenev

這是我剛纔想到的，看看你的想法。所以我們使用:after並在文本下創建一行。這隻適用於父級寬度（居中）的情況。

HTML：

<div>Test</div>

CSS：

div { 
    width: 30px; 
} 
div:hover:after { 
    content: ""; 
    display: block; 
    width: 5px; 
    border-bottom: 1px solid; 
    margin: 0 auto; 
}

DEMO

更新CSS：

div { 
    display: inline-block; 
}

不知道爲什麼我沒有想到這一點，但你可以使用inline-block得到它，而無需寬度的家長中心。

DEMO HERE

下面是使用同樣的方法鏈接，只是櫃面你弄糊塗了。

DEMO HERE

所以，現在我已經告訴我甚至應該使這裏指出，最明顯的一點就是對於不知道width可以是百分比的人的更新。

width: 70%;

改變寬度從5px到70%所以它會與文本的寬度擴大。

DEMO HERE

來源

2014-05-13 12:59:05 Ruddy

+1好主意。也可以有百分比的寬度。 – Abhitalks

+1瞭解了一個很好的竅門 – Viscocent

@Ruddy只是在你想要編輯你的答案的情況下正面向上。乾杯:) – alou

嘗試邊界創建另一個股利。並根據您的選擇調整該div的寬度。我希望這將有所幫助。

來源

2014-05-13 12:59:19

use underline or if u want the line to be much shorter try scalar vector graphics(svg) with this you can have custom lines. 
<svg id="line "height="40" width="40"> 
    <line x1="0" y1="0" x2="700" y2="20" style="stroke:rgb(125,0,0);stroke-width:2" />

來源

2014-05-13 13:03:09 dev9

這個怎麼樣？

a {text-decoration:none;position:relative;} 
a:hover:before {content:"_";position:absolute;bottom:-5px;left:50%;width:10px;margin:0 0 0 -5px;}

檢查這個搗鼓更多：http://jsfiddle.net/h7Xb5/

來源

2014-05-13 13:05:25 valerio0999

編輯：紅潤的解決方案具有相同的效果和更優雅因此基於這一點，我有另外的過渡最近使用過它，使它多一點醒目的，我認爲這將是有益的分享這裏：

a { 
    display: inline-block; 
    text-decoration:none 
} 
a:after { 
    content: ""; 
    display: block; 
    width: 0; 
    border-bottom: 1px solid; 
    margin: 0 auto; 
    transition:all 0.3s linear 0s; 
} 

a:hover:after { 
    width: 90%; 
}

jsfiddle link

（ORI ginal回答以下）

Check this我只是想出了在小提琴演奏：懸停：

<a class="bordered" href="#">I am a link, hover to see</a> 


a.bordered { 
text-decoration:none; 
position: relative; 
z-index : 1; 
display:inline-block; 
} 

a.bordered:hover:before { 
content : ""; 
position: absolute; 
left : 50%; 
bottom : 0; 
height : 1px; 
width : 80%; 
border-bottom:1px solid grey; 
margin-left:-40%; 
}

根據百分比，可以與a.bordered打前利潤率和左側位置。

來源

2014-05-13 13:10:50 alou

懸停線下方的線

回答

相關問題