[Resolved] Adding Lines to Widget Title

[Clare]

I want to add lines on either side of the widget title.
It would look something like this:

—— WIDGET TITLE ——

Thank you so much for your help!

[Leo]

Hi there,

What you typed above should work in widget title field. Does it not?

[Clare]

I don’t want to add dashes, but a line, similar to the widget titles of this blog:
http://www.kwernerdesign.com

[Tom]

Hi Clare,

Give this a shot:

.widget-title {
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}

.widget-title:before, 
.widget-title:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '';
    background-color: red;
    margin-left: 10px;
}

.widget-title:before {
    margin-left: calc(-50% - 10px);
    text-align: right;
}

[Clare]

Like a charm! Thanks Tom!

[Tom]

You’re welcome! 🙂

[Author]

Posts