How to get html hr tag to stop overlapping onto nearby text when page is resized - using Bourbon Neat grid framework

Question

I have some text, a page title, then on the same line just to the right of said title is an hr-tag vertically centered. Everything is positioned using Neat's grid framework. It is responsive for the most part - the hr line resizes etc.. but also begins to overlap onto the text on it's left at a certain point.

How can I avoid this? Should I not be using an hr tag? If not, what are the alternatives?

End goal is to have something like this "Page Title -----------------------" with the line being solid, vertically centered, and responsive.

Solutions, thoughts, suggestions??

score 2 · Accepted Answer · answered Apr 15 '15 at 19:11

You could get the same kind of effect using the after pseudo-element:

.line {
  overflow: hidden;
  position: relative;
}

.line::after {
  content: '';
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid gray;
  position: absolute;
  bottom: 0.5em;
  margin-left: 0.5em;
}

Fiddle

How to get html hr tag to stop overlapping onto nearby text when page is resized - using Bourbon Neat grid framework

1 Answers1