Draw line after a title with CSS

Question

How can I draw a line like after title text like this :

"TITLE ________"

In CSS?
The "_" should complete the rest of the div and fill the remaining space.

Please post the code you have tried so far in a jsfiddle or similar. — Billy Moat, Jun 01 '15 at 13:04

score 14 · Accepted Answer · edited May 23 '17 at 12:32

14

h1{
  overflow:hidden;
}
h1:after{
  content:'';
  display:inline-block;
  width:100%; height:100%;
  margin-right:-100%;
  border-bottom:1px solid #000;
}

<h1>Title</h1>
<h1>Longer Title</h1>

edited May 23 '17 at 12:32

Community

1
1

answered Jun 01 '15 at 13:01

web-tiki

99,765
32
217
249

Ok it's completely what i need there is other solution compatible with IE 6 ? Tanks – Olaf Jun 01 '15 at 13:50
@Olaf please dont send in tanks! and pseudo elements are not supported in ie6, and there aren't many people using ie6 – Max Payne Jun 02 '15 at 02:58
what if we have 2 line heading. the line should fill first line as suggested by your answer and second line should fill whole space. see this link for reference image. https://i.stack.imgur.com/yQ4gJ.jpg – Assad Nazar Aug 14 '18 at 17:49

adamccfc · Answer 2 · 2018-07-30T09:56:35.887

4

h1 {
  position: relative;
}

h1:after {
  content: "";
  position: absolute;
  border-bottom: 1px solid red;
  width: 100%;
  bottom: 0;
}

<h1>Title Here</h1>

edited Jul 30 '18 at 09:56

answered Jun 01 '15 at 13:00

adamccfc

224
2
11

Der Vampyr · Answer 3 · 2015-06-01T12:56:26.857

-3

h1:after {
    content: "__________________";
}

Further explanation and examples: :after pseudo class

edited Jun 01 '15 at 12:56

answered Jun 01 '15 at 12:53

Der Vampyr

941
1
7
13

The "_" will complete all the rest of the div ? – Olaf Jun 01 '15 at 12:56
1

No, it won´t. It will be as long as you type _ in it. – Der Vampyr Jun 01 '15 at 12:57
If you dont want a specific length, you should go with the other solutions that use a border. – Der Vampyr Jun 01 '15 at 13:05

Draw line after a title with CSS

3 Answers3

Linked

Related