Add Accent to V.2 Headline Elements

[SeekGod]

Hi there,

Awhile ago I came across a ticket where someone from your awesome support team provided css to add an accent line to v.2 headline elements. I used this for awhile, however now I can’t get it to work? I’m trying to use it in the Pro footer builder. Here is the code:

/Add Accent Even to V2 Headline Element/

.accent.x-text-headline {
overflow: hidden;
}

.accent.x-text-headline .x-text-content-text-primary {
display: inline-block;
width: auto !important;
position: relative;
}

.accent.x-text-headline .x-text-content-text-primary:before,
.accent.x-text-headline .x-text-content-text-primary::after {
content: “”;
position: absolute;
top: 50%;
height: 2px;
width: 9999px;
display: block;
margin-top: -1px;
background-color: #e5e5e5;
}

.accent.x-text-headline .x-text-content-text-primary:before {
right: 100%;
margin-right: 0.8em;
}

.accent.x-text-headline .x-text-content-text-primary::after {
left: 100%;
margin-left: 0.8em;
}

[ruenel]

Hello @SeekGod,

Thank you for the very detailed post information.

Are you trying to get this look for the headline?

Actually, the code is already perfect. What is missing is that you need to add a custom accent class to the headline element. Click the headline element and find the “Customize” tab. That is where you will insert the custom class.

Hope this helps. Please let us know how it goes.

[SeekGod]

Hi @RueNel,

Thanks for confirming that the code is good. Actually, I was trying to do it on the footer of God.net/god. I did add the custom accent class to the headline element, but the problem was that the width was set to “auto” instead of “100%” so the accent line was not showing.

All good now! thank you for your help

[christian]

You’re welcome. Glad we’re able to help.

[SeekGod]

Actually @christian_y, I guess I still need some help with this. I can’t figure out why the line is not centered equally around the text even though the element is centered?

[ruenel]

Hello @SeekGod,

Do you want it to display like this?

Well, all you have to do is click the headline element, find the “Text” tab and align the text to the center.

Please let us know if this works out for you.

[SeekGod]

Yes, that is precisely how I want it to display like. I already aligned the text to the center, and it still is not changing? Can’t figure out why.

I tried on both Chrome and Morzilla and cleared my cache on both…

[christian]

Hey @SeekGod,

Please change this code:

.accent.x-text-headline .x-text-content-text-primary {
display: inline-block;
width: auto !important;
position: relative;
}

to this:

.accent.x-text-headline .x-text-content-text-primary {
    display: inline-block;
    width: auto !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

It would also be good to remember that the effect is only for short text. It won’t work for long text.

Hope that helps.

[SeekGod]

That did it. Thank you guys

[christian]

You’re welcome. Glad we’re able to help,