How to draw a line with css and show text or image on it

Question

I\'m trying to draw a line using CSS and show text/image in the middle of the line.

Answer 1

Demo 1

:root{padding: 40px}
p{

    position: relative;
    margin:40px auto;padding:0 10px;
    background:white;
    display:inline-block;
}
p:before,p:after{
    content:"";
    position:absolute;
    z-index:-1;
    right:0
}
p:before{
    top:-4px;
    left: -24px;
    height: 24px;
    width: 480px;
    border:solid 1px #666666
}
p:after{
    top: 50%;
    width: 466px;
    left: -16px;
    border-top: solid 1px #666666
}

Featured

Use Pseudo element

:root{padding: 40px}
p{

    position: relative;
    margin:40px auto;padding:0 10px;
    background:white;
    display:inline-block;
}
p:before,p:after{
    content:"";
    position:absolute;
    z-index:-1;
    left:-14px;
    right:0;
    width: 480px
}
p:before{
    top:-4px;
    height: 24px;
    border:solid 1px #666666
}
p:after{
    top:50%;
    border-top:solid 1px #666666
}

Featured

Demo 2

p{

    position: relative;
    margin:0;padding:0 10px;
    background:white;
    display:inline-block;
}

p:after{
    content:"";
    position:absolute;
    top:50%;
    left:-14px;
    right:0;
    width: 100vw;
    border-top:solid 1px #666666;
    z-index:-1;
}

Featured

Update

:root{padding: 40px}
p{

    position: relative;
    margin:40px auto;padding:0 10px;
    background:white;
    display:inline-block;
}
p:before,p:after{
    content:"";
    position:absolute;
    z-index:-1;
    right:0
}
p:before{
    top:-4px;
    left: -24px;
    height: 24px;
    width: 480px;
    border:solid 1px #666666;
    background-color: gray;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.5) 2px, rgba(255,255,255,.5) 6px)
}
}
p:after{
    top: 50%;
    width: 466px;
    left: -16px;
    border-top: solid 1px #666666
}

Featured