html - CSS <hr> right aligned next to text

Question

I need a h2 that has a heavy stroke to the right of it. Like so:

I'm struggling with the best, responsive way to accomplish it. Not to mention that it's in a custom WP theme, so I don't want to create a ton of on page markup that the client will break immediately :)

Answer 1

What you need is a single element and an :after pseudo. P.S It's responsive.

Demo

Explanation: Here, the main part is to use overflow: hidden; on the element, and than am creating a virtual element using an :after pseudo with content property, and am positioning it absolute to the parent element which am setting to relative

<h2>Hello World</h2>

h2 {
  font-size: 20px;
  font-family: Arial;
  position: relative;
  overflow: hidden;
}


h2:after {
  display: inline-block;
  content: "";
  height: 4px;
  background: #f00;
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -2px;
  margin-left: 10px;
}