i've styled my hr tag but it doesn't work, what should i do?

Question

when I enter the details of hr tag in my style.css, it doesn't show me the result! HTML:

<hr class="hr1">

I wanna have a hr tag which has some details like color, hover, text-align and I wanna change its width too.

this is what I wrote in CSS:

.hr1{
    background-color: violet;
    width: 79%;
    text-align: center;

}
.hr1:hover {
    background-color: blue;
}

but the only thing that I can see in my html page, is a gray 79% line in center of the page! Not a line with the color and hover I specified!.

Answer 1

It looks like the <hr> by default doesn't have height. You can define which height you want, and can remove the border all together.

.hr1 {
  background-color: violet;
  width: 79%;
  text-align: center;
  height: 2px;
  border: 0;
}

.hr1:hover {
  background-color: blue;
}

text
<hr class="hr1">
another