I want same static red underline in the footer section of pages

Topic summary

Goal: Replicate Fuji Sports’ footer style with a static red underline under footer category headings (e.g., “Shop,” “Useful links”), with white text and red on hover.

What was tried: A CSS snippet was suggested to change footer link color to red on hover within a mobile media query, added before in theme.liquid. The requester reported it did not work and clarified they need a persistent underline under the category titles, not just hover effects.

Updated approach: Add a custom class to each footer category heading and use a CSS pseudo-element to render the underline, e.g.:

  • h2.inline-richtext::after { content:“”; display:block; width:100%; max-width:50%; height:3px; margin:7px 0; background:red; }
    This creates a static red bar beneath the specified headings. “::after” is a CSS pseudo-element that inserts decorative content after an element.

Requests/next steps: Provide store URL and password (if applicable) for analysis. Assign classes to the relevant headings and place the CSS in theme.liquid (or stylesheet).

Status: No confirmation of success yet; discussion remains open. Images were illustrative screenshots, not essential for implementation.

Summarized with AI on January 6. AI used: gpt-5.

hye

www.fujisports.com if you check this websites footer section which is black and there is a static red under line under pages .how can i have this functionality in my footer section. text color should be white and on hover color should be changed to red color same like this website has.

this is my website

Hi, @zikriarathore

Greetings from the Wholesale Helper Support Team! Happy to help you today.

Please provides us the page Url and password (if store password is enabled) , so that we can analyse the problem .

Let me know If need further assistance

Regards,

Wholesale Helper Support Team

Hello @zikriarathore

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 750px){ .footer-block__details-content .list-menu__item--link:hover{ color:red !important; text-decoration:none !important; } }

if you check fuji sports footer there is a underline under category page in my case category name is shop , there should be static red underline under shop ,i want for all categories in footer,for example in my footer there are two categories shown i.e usefull links and shop

hye

above code is not working in theme.liquid i inserted before

You have to add custom code for each category and give custom class and add class to the code given below.
For Example:

h2.inline-richtext::after { content: ""; display: block; width: 100%; height: 3px; margin: 7px 0; background-color: red; max-width: 50%; }