Applying two classes in CSS for the same <hr> element but without specifying them

Question

On my Wordress blog, I frequently use <hr> in blog posts. In other posts I use two <hr> per post - and in others I use no <hr>.

So right now this is in my CSS:

.entry-content hr {
  overflow: visible;  
  padding: 0;
  border: none;
  border: 10px solid #74eda7;
  border-radius: 8px;
  color: green;
  text-align: center;
  }

.entry-content hr:after {
   content: "↓ INSPIRE ↓"; 
    display: inline-block;
    position: relative;
    top: -0.8em;
    font-size: 1.2em;
    padding: 0 0.25em;
    background: white;

which works fine unless I add another <hr> to a blog post and then I want a new set of attributes to be applied.

Is there anything I can please add so that a second instance of <hr> within any one blog post takes on a whole new set of attributes.

Something like this works:

.entry-content hr:nth-child(odd):after {
content: "↓ inspire 2X ↓";
}

.entry-content hr:nth-child(even):after {
content: "↓ INSPIRE ↓";
}

except when I have multiple blog posts per page, the odd and even makes it inconsistent across posts. The first <hr> should say "Inspire" and the 2nd on any blog post should say "inspire 2x" and a web page can have up to 7 blog posts in total.

I don't want to manually start adding class names into each blog post.

Any assistance would be greatly appreciated.

Answer 1

Just replace nth-child with nth-of-type:

.entry-content hr:nth-of-type(even):after {
content: "↓ inspire 2X ↓";
}

.entry-content hr:nth-of-type(odd):after {
content: "↓ INSPIRE ↓";
}