Positioning a 'line' near a header, that independent of the header size, length, padding or margin

Question

I want to obtain a header like in the image below

I can obtained using position absolute, but this depends on the header characteristics, like margin,padding.

I'm interested to have the result below, indifferent of the header size,length , padding or margin. I need something that is supported also by older browsers like IE10, IE11.

if it's a header of h1 tag means, it will be `display:block`. so if you want the line next to it means, you have to position it. You can try the same using after pseudo element also. — Aravind S, Jun 25 '18 at 06:17

score 2 · Accepted Answer · answered Jun 25 '18 at 06:30

2

Use :after and create there the line

Learn:https://developer.mozilla.org/en-US/docs/Web/CSS/::after

div{
color:red;
}
div:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: red;
    top: 20px;
    margin-left: 10px;
    margin-right: 4px;
}

<div>Header</div>

answered Jun 25 '18 at 06:30

לבני מלכה

15,925
2
23
47

that what you mean? – לבני מלכה Jun 25 '18 at 06:32
using top the position depends on the header/div height, and I want to be independent – user3541631 Jun 25 '18 at 06:55

Positioning a 'line' near a header, that independent of the header size, length, padding or margin

1 Answers1