Heading with horizontal lines on either side

[pearlmultimedia]

Is there a way to use an exiting Cornerstone element to make a section divider line line this– something with a text box in the middle of lines? If not, what would you suggest to make it? I tried creating a PNG file and placing it as an image but the text looked fuzzy.

Or should I customize the X H3 header, something this: http://vclever.com/blog/how-to-style-a-heading-with-horizontal-lines-either-side-using-css/ ? I want to do this in posts but not pages for H3.

Thanks in advance.

[Prasant]

Hello @pearlmultimedia,

Thanks for asking.

You can refer solution mentioned in following thread:

Line in Classic Custom Headline

Thanks.

[pearlmultimedia]

Thanks @Prasant. How will I specify that for H2s? Do I put the class .with-line in the H2 I want it for? That’s what I’d like to do. I found this CSS on a thread. How could I make a class for it?

Also, can I do it with the other type of headline (not Classic)?

[Joao]

Hi There,

You can add a class by clicking on The customize tab of the element.

You will add the class with-line , No dot(.) as a . is the markup for class.

Hope it helps!

[pearlmultimedia]

@Prasant

.with-line span {background: #fff; padding: 0 15px; } .with-line {position: relative; z-index: 1;} .with-line:after {border-bottom: 3px solid #4f47f6; content: “”;

Sorry, I tried that but it didn’t work. I’m probably not doing it right. Could you please give me the entire code to add the h2 head with the lines on either side?

[mldarshana]

Hi there,

First assign the class as follows.

Then add the CSS rules into your page’s CSS area.

.with-line span {background: #fff; padding: 0 15px; }

.with-line {position: relative; z-index: 1;}

.with-line:after {border-bottom: 3px solid #4f47f6; content: ""; position: absolute; top: 45%; left: 0; right: 0; width: 95%; z-index: -1;}

Hope that’s clear.

[pearlmultimedia]

Thanks. I tried but it makes the line go all the way behind the words. I need it to span either side of the words.

[rad]

Hi there,

In that case, would you mind providing a sample URL that has this custom headline? Maybe there are conflicting CSS and we can check it.

Thanks!