CODEWITHSUNDEEP
htmlcss
JJ BOBO
JJ BOBO

Reputation: 111

Issue on Adding Before After Content to hr Element

I used to was able to add content to before and after of hr element by following rules. but it is not working now! can you please let me know what is causing the issue?

.hr-title:before {
    content: "";
    width: 16px;
    height: 24px !important;
    background-color: gold;
    position: absolute;
    top: -7px;
    left: -1px;
}

.hr-title {
    position: relative;
    height: 1px;
    background-color: #d0d0d0;
    color: #ccc;
    border-top: 1px solid #ccc;
    margin: 0 auto;
    margin-top: -12px;
    margin-bottom: 30px;
    width: 50%;
}

.hr-title:after {
    content: "";
    width: 4px;
    height: 14px;
    background-color: #24A2C6;
    position: absolute;
    top: -7px;
    right: -1px;
}
<h2> Test </h2>
<hr class="hr-title">

Upvotes: 0

Views: 2191

Answers (3)

Raeesh Alam
Raeesh Alam

Reputation: 3490

Your code is right just need to add this css overflow: visible; property in .ht-title class because of hr element has by default overflow:hidden. I hope this snippet will help.

.hr-title {
  position: relative;
  height: 1px;
  background-color: #d0d0d0;
  color: #ccc;
  border-top: 1px solid #ccc;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
  width: 50%;
  overflow: visible;
}
.hr-title:before {
  content: "";
  width: 16px;
  height: 14px;
  background-color: gold;
  position: absolute;
  top: -7px;
  left: -1px;
}
.hr-title:after{
  content: "";
  width: 4px;
  height: 14px;
  background-color: #24A2C6;
  position: absolute;
  top: -7px;
  right: -1px;
}
<h2>Test</h2>
<hr class="hr-title">

Upvotes: 1

cyr_x
cyr_x

Reputation: 14267

The problem is regarding to the specification of HTML <hr /> is a so called void element. And the pseudo classes ::before and ::after aren't intended to work on void-elements. because those are elements whose content model never allows it to have contents under any circumstances. Your example will only work in a few browsers which simply ignore the specification at that point.

You can find a list of void elements here.

Upvotes: 3

MK87
MK87

Reputation: 165

Your code seems to work properly. The objects before and after hr are both moved up to 7 px.

Upvotes: 0

Related Questions