Style headline border-bottom

[swalter85]

Hello,

I'm trying to move up this border.

Goal is the border to be slightly behind the text.

untammed.co

pw: wild

Here is the code I'm using:

Want Smarter & Healthier Children? <span style="  border-bottom: 15px solid #EBE0FB;">Meet Choline</span

[DaisyVo]

Hi @swalter85 

I don't see this part in your store, could you please show me where i can see it?

Best,

Daisy

[swalter85]

My bad! It's a separate landing page.

https://untammed.co/pages/choline

[DaisyVo]

Hi @swalter85 

Please change the code to

<span id="span-custom" style="position: relative;">Meet Choline</span>

And add this code to the custom CSS: 

span#span-custom::after {
    content: "";
    background: #EBE0FB;
    width: 100%;
    height: 15px;
    position: absolute;
    bottom: -8px;
    left: 0;
}

I hope this helps

Best,

Daisy

[Made4uo-Ribe]

Hi @swalter85 

Which page I can find this headline? 

[swalter85]

 It's a separate landing page. My bad!

https://untammed.co/pages/choline

[LizHoang · Accepted solution]

Hi @swalter85, thanks for reaching out. 

To move the border slightly behind the text, you'll need to adjust the code. Please replace your current code with the following code snippet: 

Want Smarter & Healthier Children? <span style="display: inline-block !important;height: 3rem !important;border-bottom: 15px solid #EBE0FB;">Meet Choline</span>

I hope my solution is helpful to you.

Liz

[websensepro]

Hi @swalter85 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

h2.hero__title.heading-size-8.block-padding.aos-animate span {
    border-bottom: 40px solid #EBE0FB !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!