Inline Horizontal Rule

Question

How to make hr element be inline like I do it in snippet, but without absolute positioning and without hr crossing text?

div {
    position: relative;
}

hr {
  position: absolute;
  top: 0.125rem;
  left: 0;
  right: 0;
}

<div>
  Hello, World? <hr>
</div>

When you say _inline_ but not crossing the text, where do you actually want the line to appear? Next to the text? Underneath it? I don't understand from your question what the objective is — Martin, May 28 '19 at 14:59
a generic duplicate: https://stackoverflow.com/q/5214127/8620333 — Temani Afif, May 28 '19 at 14:59

score 4 · Accepted Answer · answered May 28 '19 at 14:59

4

You could use display flex on the parent and then give the hr flex grow so it fills the rest of the line:

div { display:flex; }

hr {
  flex-grow:1;
  margin-left:10px; /* gap on left */
}

<div>
  <span>Hello, World?</span> <hr>
</div>

answered May 28 '19 at 14:59

Pete

1 Answers1