Add a long black line at the end of a header tag

Question

I'm trying to add a black line after a header tag in HTML using css :after pseudo class. Here is the code:

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 10px;
  letter-spacing: 0.07em;
  line-height: 1.5em;
  font-size: 130%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
h1:after {
  display: inline-block;
  content: "";
  height: 2px;
  background: black;
  width: 200px;
  margin-left: 5px;
  margin-top: 8px;
}

<div class="container">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quia accusamus aperiam magni perspiciatis dignissimos, reiciendis dolor temporibus esse dolores quasi, reprehenderit necessitatibus culpa quas nesciunt quaerat porro! Ab, laborum.</p>
  <p>Dolorem eligendi cumque deserunt illo quas aut pariatur inventore, optio provident maxime consectetur, soluta sed, aperiam illum beatae. Quidem beatae aliquid, impedit sit in accusamus rem necessitatibus, velit fugiat! Cupiditate.</p>
</div>

Codepen: http://codepen.io/angelangelesiii/pen/YXwPJb

I want that long black line to span the entire width left by the header itself.

Note: I don't want to try spanning the line to 100% then putting the header in front of it with a white background. It's an illusion but not the answer I'm trying to find. And as much as possible, no JS solutions I'm keeping this as simple as it can be.

Not exactly what you want, because it is not CSS only, but take a look at this answer: http://stackoverflow.com/questions/5540485/how-to-make-an-inline-block-element-fill-the-remainder-of-the-line — Igal S., May 08 '15 at 05:18
Nevermind, I have solved my question using flexbox and pure CSS. Thanks. — Angel Angeles III, May 08 '15 at 05:29
The problem is that all these solutions stop working when the header is longer than one line... — 0711master, May 16 '23 at 10:40

score 0 · Answer 1 · edited May 16 '23 at 11:14

Nevermind I have answered my question (once again)

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 10px;
  letter-spacing: 0.07em;
  line-height: 1.5em;
  font-size: 130%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1 {
  display: -webkit-flex;
  display: flex;
  width: 100%;
}

h1:after {
  -webkit-flex: 3;
  -flex: 3;
  display: inline-block;
  content: "";
  height: 2px;
  background: black;
  margin: auto 0 auto 5px;
}

<div class="container">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quia accusamus aperiam magni perspiciatis dignissimos, reiciendis dolor temporibus esse dolores quasi, reprehenderit necessitatibus culpa quas nesciunt quaerat porro! Ab, laborum.</p>
  <p>Dolorem eligendi cumque deserunt illo quas aut pariatur inventore, optio provident maxime consectetur, soluta sed, aperiam illum beatae. Quidem beatae aliquid, impedit sit in accusamus rem necessitatibus, velit fugiat! Cupiditate.</p>
</div>

I have used flexbox to solve this. I know that flexbox have some issues but this works for me so it's good.

ketan · Accepted Answer · 2015-05-08T05:40:33.833

0

Use position: absolute; and width:100% will give you desired output.

Check following.

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 10px;
  letter-spacing: 0.07em;
  line-height: 1.5em;
  font-size: 130%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1::after {
    background: none repeat scroll 0 0 black;
    content: "";
    display: inline-block;
    height: 2px;
    margin-left: 5px;
    margin-top: 8px;
    position: absolute;
    top: 0.5em;
    width: 100%;
}
h1 {
    overflow: hidden;
    position: relative;
}

<div class="container">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quia accusamus aperiam magni perspiciatis dignissimos, reiciendis dolor temporibus esse dolores quasi, reprehenderit necessitatibus culpa quas nesciunt quaerat porro! Ab, laborum.</p>
  <p>Dolorem eligendi cumque deserunt illo quas aut pariatur inventore, optio provident maxime consectetur, soluta sed, aperiam illum beatae. Quidem beatae aliquid, impedit sit in accusamus rem necessitatibus, velit fugiat! Cupiditate.</p>
</div>

Hope it helps.

edited May 08 '15 at 05:40

answered May 08 '15 at 05:29

ketan

19,129
42
60
98

When I resized this one the line went too far. The line should be dynamic and should span the remaining space left. – Angel Angeles III May 08 '15 at 05:31
1

I've also tried that one just before you edited it. It's good so I select it as the answer. – Angel Angeles III May 08 '15 at 05:42
You output cuts the letter "p" tail though. – Angel Angeles III May 08 '15 at 05:43
@AngelAngelesIII it's because `line-height: 1.5em;` in container. – ketan May 08 '15 at 05:43
Oops, removed as answer, the `overflow: hidden` messed up with the actual heading. It cut the "p". – Angel Angeles III May 08 '15 at 05:46

score 0 · Answer 3 · answered May 08 '15 at 05:35

0

I tried to solve it using tables display properties

h1 {
 display: table;
 white-space: nowrap;
}

h1:after {
 display:table-cell;
 content: "";
 width: 100%;
 border-bottom: 2px solid black;
}

answered May 08 '15 at 05:35

partypete25

4,353
1
17
16

This actually worked. Haha. I've totally overlooked `display: table;`. This is good but I've actually answered my question before, I have used flexbox instead though and the black line is peacefully centered vertically. Please see http://codepen.io/angelangelesiii/pen/YXwPJb – Angel Angeles III May 08 '15 at 05:38

Add a long black line at the end of a header tag

3 Answers3

Linked