Search code examples
htmlcsshoverbackground-color

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

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!.

Solution

  • 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