Benutzerdefinierte Unterstreichung, um die Breite des Inhalts anzupassen

Question

Ich versuche, eine Unterstreichung zu machen, die 50% der Länge des Wortes und zentriert unter dem Wort schwebt.

Die Breite im Pseudo-Selektor nimmt die Breite des nav eher als die Breite des a wird schwebend, trotz der Auswahl der a.

Bei der Einstellung der left-Eigenschaft ist es die linke Seite der nav statt links von der a. Ich brauche es relativ zu dem Gegenstand, der schwebt.

Hier ist der relevante Code:

nav a:hover::before{ 
    position: absolute; 
    left: calc(50% - 10%); 
    bottom: 0; 
    width: 20%; 
    height: 1px; 
    background: #7b0700; 
    content: ""; 
} 

und ein CodePen

http://codepen.io/WallyNally/pen/dXxrgj

Irgendwelche Vorschläge? Danke.

Answer 1

Sie waren fast da!

Fehlende Teil:

nav a { 
    position: relative; 
} 

ohne dass der Linienpositionen zu einem Element in DOM (mit Position absolute, relative, fixiert, oder, wenn der Körper fehlt).

Wie bei 50% Breite, würde ich das tun:

nav a:hover::before { 
    position: absolute; 
    bottom: 0; 
    height: 1px; 
    background: #7b0700; 
    content: ""; 

    /* instead of width: */ 
    left: 25%; 
    right: 25%; 

}

Gabel aus dem Code: http://codepen.io/anon/pen/BzXKrB