Same in CSS Applying two classes to the element but without explaining them.

On my WordPress blog, I use it often. <hr> In blog posts I use two in other posts. <hr> Per post – and others I don’t use. <hr>.

So right now it’s 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, of course, made the video an overnight sensation. <hr> On the blog post and then I want a new set of attributes to be applied.

Is there anything I can please add another example? <hr> A new set of attributes is taken in any blog post.

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, weird and even makes it contradictory in all posts. the first <hr> Should say "encouragement" And another must say on any blog post. "Encourage 2x" And a web page can have a total of 7 blog posts.

I don’t want to start manually adding class names to every blog post.

Any help would be greatly appreciated.