V2 Headline Accent -> Class

[mikewolf1127]

I found the following to add to the site CSS to add an accent to the V2 Headline. How do I turn that into a class so I can selectively use it on some headlines and not others?

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

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

.x-text-headline .x-text-content-text-primary:before, 
.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;
}

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

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

[ruenel]

Hello @mikewolf1127,

Thanks for posting in!

To resolve your issue, please update your custom css into this:

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

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

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

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

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

And then if you want to add accent to your v2 headline element, simply add a custom with-accent class in the v2 element’s “Customize” tab.

We would loved to know if this has work for you. Thank you.

[mikewolf1127]

Maybe I wasn’t totally clear…

I added that CSS in Theme Options, however that effects all the headlines globally.

I do not have it as a class. How do I do that?

[mikewolf1127]

Oh, I see. Yes you answered the question.

[rad]

Glad to hear that, cheers!