내용의 너비에 맞게 사용자 정의 밑줄

Question

나는 단어의 길이의 50 %이고 단어가 가운데에 올리려는 밑줄을 만들려고합니다.

의사 선택기의 너비는 a을 선택 했음에도 불구하고 a의 너비가 아닌 nav의 너비를 사용합니다.

left 속성을 설정할 때 a 왼쪽이 아닌 nav의 왼쪽이 정적입니다. 나는 그 물건을 잡아 당길 때 상대적이어야합니다.

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

과 CodePen

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

어떤 제안 : 여기

는 관련 코드? 감사합니다.

Answer 1

거의 다 왔어!

된 부분 : DOM 일부 요소까지 그 광고 위치없이

nav a { 
    position: relative; 
} 

(절대 위치와 상대 고정 또는 본체에없는 경우). 코드에서

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

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

}

포크 : 당신이 무엇을 원하는 않았다 정확히를 http://codepen.io/anon/pen/BzXKrB