Hovering over a progress bar moves it slightly

I have created a progress bar using the following:

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

For the hover-text, I have used the following css:

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

It can be seen here: jsFiddle

I know this only works in Google Chrome, but that is ok.

My issue is that when i hover my mouse over the progress bar, it moves a few pixels down. I have tried different border styles in the css, but without any luck. It shows the value correctly when i hover over the progress bar, but I would like for the progress bar to remain in place…

Any suggestions?

Source: html5

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.