Responsive before & after lines

Question

I have a header, and i want lines before and after it. I have already achieved that but they are not currently responsive... So at the moment when i make my screen smaller they go onto new lines etc its horrid. I just want the lines to get smaller as the screen does..

Here's what i have tried so far:

h2:after {
display: inline-block;
margin: 0 0 8px 20px;
height: 3px;
content: "";
text-shadow: none;
background-color: #E0E0E0;
max-width: 100%;
}

h2:before {
display: inline-block;
margin: 0 20px 8px 0;
height: 3px;
content: "";
text-shadow: none;
background-color: #E0E0E0;
max-width: 100%;
}

As soon as i turn width:100% to max-width my lines just disappear.

An inline-block element will shrink to fit it's content, always. By adding a `width: 100%`, you're overriding that. However, if you change that to a `max-width`, you're telling the element that it can never exceed `100%` width. This will never happen, because the content of your `:before` and `:after` elements are *empty*. They will shrink to fit their content, which is nothing, rendering them with a width of `0`. — Tyler Roper, Oct 19 '16 at 14:35

Razia sultana · Answer 1 · 2016-10-20T13:32:20.780

0

header {
    display:table;
    width:100%;
    max-width:100%;
}
header div {
    display:table-row;
    line-height:1.5em;
    font-size:2em;
    white-space:nowrap;
}
header h1 {
    font-size:inherit; /* Change font-size in header */
    overflow:hidden;
    display:table-cell;
    vertical-align:middle;
    width:1px;
    table-layout:fixed;
}
header span.spacer {
    display:table-cell;
}
header h1 {
    padding:0 10px;
}
header span.spacer:after {
    display:inline-block;
    width:100%;
    content:".";
    font-size:0;
    color:transparent;
    height:2px;
    background:#000;
    vertical-align:middle;
    position:relative;
    top:-1px;
 background-color:#F00;
}

<header><div><span class="spacer"></span><h1>Header</h1><span class="spacer"></span>

edited Oct 20 '16 at 13:32

answered Oct 19 '16 at 14:45

Razia sultana

2,168
3
15
20

That's good, though how can i create a gap between the header and the lines? – Oct 20 '16 at 08:05
May be it will help. Please try this h2{ margin:0; padding:0;} Or h2{ line-height: 30px; } Or this would set top and bottom margin's for all headers: h2,{ margin-top:20px; margin-bottom:10px; } – Razia sultana Oct 20 '16 at 12:36
That only creates gaps above and below, i want gaps between the line and the text. – Oct 20 '16 at 13:03
Please check code snippet. I also change my code. May be now you can find your solution. Thanks – Razia sultana Oct 20 '16 at 13:34

Responsive before & after lines

1 Answers1