Guillaume Guillaume - 5 months ago 25
CSS Question

Use before & after Pseudo-element to make a line

I'm using Pseudo-element

:before
and
:after
to draw a line before and after a title. It's working with an image:

.mydiv::before {
content: url(img/line.png);}
.mydiv::after {
content: url(img/line.png);}


Here is the result :

you can see befor and after the 1px white horizontale line

But, I would like the line to expand and fill in the whole div before and after the title, like this :

The line reach reach the both sides of the div

Is there a way to specify a percentage for the image for it to stretch? I try this, but it's not working :

.mydiv img {
width: 100%;
height: auto;
}

Answer

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;
}
<div id="header">
   <h3>Last Projects</h3>
</div>