зависания над полосой прогресса перемещает его немного

Question

я создал индикатор, используя следующее:

<progress value="20" max="100"></progress> 

Для парения-текста, я использовал следующий CSS:

progress[value] { 
width: 1024px; 
height: 20px; 
border: none; 
} 
progress:hover::before { 
display: block; 
content: attr(value); 
width: 100%; 
text-align: center; 
} 

Это может можно посмотреть здесь: jsFiddle

Я знаю, что это работает только в Google Chrome, но это нормально.

Моя проблема в том, что когда я наводил указатель мыши на индикатор выполнения, он перемещается на несколько пикселей вниз. Я пробовал разные стили границ в css, но без везения. Он правильно показывает значение, когда я наводил курсор на индикатор выполнения, но я хотел бы, чтобы индикатор выполнения оставался на месте ...

Любые предложения?

Answer 1

Сделать display:block и проблема должна исчезнуть

progress[value] { 

    display: block; 
}