Linia poniżej linku na hover

Question

Jak dodać krótką linię pod linkiem? Linia powinna być widoczna tylko po najechaniu myszą. Próbowałem z border-bottom, ale w ten sposób linia jest w 100% szerokość łącza i chcę, aby linia była krótsza niż link.

Oto przykładowy obraz efektu, który próbuję wykonać.

Answer 1

Można spróbować użyć elementu ::after pseudo:

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>

Answer 2

Wystarczy użyć tej klasy:

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

takiego, linia pojawi się po najechaniu na element. I możesz określić na obrazku, jak mała lub duża musi być linia.

Answer 3

To jest coś, o czym pomyślałem, sprawdź to, co myślisz. Dlatego używamy :after i tworzymy linię pod tekstem. Działa to tylko wtedy, gdy rodzic ma szerokość (do centrowania).

HTML:

<div>Test</div> 

CSS:

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

DEMO

---

Updated CSS:

div { 
    display: inline-block; 
} 

Nie wiem, dlaczego nie zrobił myśleć o tym, ale może po prostu użyć inline-block aby zmusić go do centrum bez rodzica mającego szerokość.

DEMO HERE

---

Oto link za pomocą tej samej metody, tylko okrywać irytować.

DEMO HERE

---

Więc ja teraz powiedziawszy mam jeszcze podkreślić Najbardziej oczywistą rzeczą, więc tutaj jest aktualizacja tylko dla osób, które nie znają width może być procent.

width: 70%; 

Zmieniono szerokość od 5px do 70% więc będzie poszerzyć do szerokości tekstu.

DEMO HERE

Answer 4

spróbuj utworzyć innego div za granicę. Dostosuj szerokość tego elementu div zgodnie z dokonanym wyborem. Mam nadzieję, że to pomoże.

Answer 5

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" /> 

Answer 6

co na ten temat?

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

check to skrzypce na więcej: http://jsfiddle.net/h7Xb5/

Answer 7

Edit: rozwiązanie Ruddy ma taki sam wynik i jest bardziej elegancki, więc na tej podstawie, użyłem go niedawno z dodatkiem przejścia, co czyni go nieco bardziej wzrok i pomyślałem byłoby podzielić się tutaj:

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 Ginał odpowiedzieć poniżej)

Check this Właśnie wpadł, grając na skrzypcach:

<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%; 
} 

zależności od wartości procentowych, można grać z a.bordered: hover: przed marży i lewym położeniu.