Use before & after Pseudo-element to make a line
You don't need both :before
and :after
, either of the 2 will be enough and as you've been told, you don't need an image. See the approach below.
#header {
width: 100%;
height: 50px;
margin: 50px 0;
text-align: center;
font-size: 28px;
position: relative;
background-color: #57585C;
}
#header:after {
content: '';
width: 100%;
border-bottom: solid 1px #fff;
position: absolute;
left: 0;
top: 50%;
z-index: 1;
}
h3 {
background-color: #57585C; /* Same as the parents Background */
width: auto;
display: inline-block;
z-index: 3;
padding: 0 20px 0 20px;
color: white;
position: relative;
font-family: calibri;
font-weight: lighter;
margin: 0;
}
<div id="header">
<h3>Last Projects</h3>
</div>
In case you need <h3>
title to have transparent background - you can use both :before
and :after
and display: flex
More about flex-grow
you can read here https://developer.mozilla.org/en-US/docs/Web/CSS/flex.
body {
background: linear-gradient(0.25turn, #3f87a6, #000000, #f69d3c); /* example of custom background */
}
#header {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center; /* making vertical centerign of all children */
}
#header::before, #header::after {
content: '';
flex: 1 1 auto; /* the first digint is 'flex-grow: 1', helps elemet to occupy all free space */
border-bottom: solid 1px #fff;
}
h3 {
flex: 0 1 auto; /* the first digint is flex-grow: 0 */
padding: 0 15px 0 15px;
color: #fff;
}
<div id="header">
<h3>Last Projects</h3>
</div>