CODEWITHSUNDEEP
csshtmlgoogle-chromeprogress-bar
Eudaimoniac
Eudaimoniac

Reputation: 1

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?

Upvotes: 0

Views: 1009

Answers (1)

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

Make it display:block and the problem should disappear

progress[value] {

  display: block;
}

Upvotes: 1

Related Questions