Style headline border-bottom

Store Design
, ,

Topic summary

A user is attempting to style a headline border on a landing page, specifically trying to position a colored border-bottom slightly behind the text for a visual layering effect.

Current Issue:

  • The border positioning needs adjustment on the headline “Want Smarter & Healthier Children? Meet Choline”
  • Located on a separate landing page at untammed.co/pages/choline
  • An image was provided showing the desired visual outcome

Proposed Solutions:
Three community members offered different CSS approaches:

  1. LizHoang: Suggested wrapping text in a <span> element with inline styling
  2. websensepro: Recommended adding CSS to theme files targeting the specific heading class with increased border-bottom thickness (40px)
  3. DaisyVo: Proposed using a <span> wrapper combined with a CSS ::after pseudo-element to create an absolutely-positioned background layer

Status: Multiple solutions provided, awaiting user feedback on which approach works best. The discussion remains open with no confirmed resolution yet.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I’m trying to move up this border.

Goal is the border to be slightly behind the text.

pw: wild

Here is the code I’m using:

Want Smarter & Healthier Children? Meet Choline

![image_2024-12-27_052149900.png|466x151](upload://a6dRGXTzFDAEcE9ZstcaqbYMqBe.png)
1 Like
2

Hi @swalter85

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

Best,

Daisy

3

Hi @swalter85

Which page I can find this headline?

4

My bad! It’s a separate landing page.

https://untammed.co/pages/choline

5

It’s a separate landing page. My bad!

https://untammed.co/pages/choline

6

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? Meet Choline

I hope my solution is helpful to you.

Liz

7

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:

websensepro_0-1735310441259.png
websensepro_0-1735310441259.png976×466 141 KB

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!

8

Hi @swalter85

Please change the code to

Meet Choline

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