Why I can't adjust line to be width 100%

Question

I wan't to set line full width, from text on left side.

If text have one word with 5 letters to be like this:

and if text have 3 words to be like this:

Can someone help me, here is what I tried to solve my problem, but it's not semantic useful

<h3>
Lorem
</h3><div class"line">

</div>


h3{
  display:inline-block;
  width:20%;
}
div{
  display:inline-block;
  height:2px;
  width:80%;
  background-color:red;
}

Your HTML needs to be `
`. It was missing the `=` and presumably your CSS wants to then refer to `.line`. — jfriend00, Feb 07 '16 at 15:08
ok, thats not problem, in css I called div element to set atributes — ml92, Feb 07 '16 at 15:11
When things aren't working, one of the FIRST things you do is fix all your illegal HTML. It may not be the issue, but it could be contributing or confusing the issue on some browsers. — jfriend00, Feb 07 '16 at 15:15
Related: [Line before and after title over image](http://stackoverflow.com/questions/23584120/line-before-and-after-title-over-image) — web-tiki, Feb 07 '16 at 15:17

Nenad Vracar · Accepted Answer · 2016-02-07T15:19:13.237

4

You can use Flexbox and :after pseudo element. Or if you dont want to use :after you can do it like this Demo

h3 {
  display: flex;
  align-items: center;
}

h3:after {
  content: '';
  flex: 1;
  height: 1px;
  background: red;
  margin-left: 10px;
}

<h3>Lorem ipsum </h3>

edited Feb 07 '16 at 15:19

answered Feb 07 '16 at 15:10

Nenad Vracar

118,580
15
151
176

What is the browser support for this technique? – jfriend00 Feb 07 '16 at 15:16
Thank you bro! Svaka cast brate, ovo je odlicno – ml92 Feb 07 '16 at 15:20

score 0 · Answer 2 · answered Feb 07 '16 at 15:22

Take this as an idea: https://jsfiddle.net/86hy152p/

h3{
  display:inline-block;
  background-color:
}
.line {
  display:inline-block;
  height:2px;
  width:80%;
  background-color:red;
}

You can adjust the height / position of the red bar later with margin and padding.

Why I can't adjust line to be width 100%

2 Answers2