Jump to content

How to add text highlights to accordion titles

Recommended Posts

Hi,

 

I like the new animations that underline text. I was wondering if there was a way to add this to accordion titles. So basically there is an animated line that underlines the word. See below for where I would like to place the line. (Yellow highlights where I want it to go.) Also see below for an example of the animated line I am talking about.

 

Thanks

AA23165E-D2CB-4CE5-B666-A0968FBAEA4F.jpeg

79B17015-F527-4453-B4D8-B5974CD70079.jpeg

Link to comment
  • Replies 3
  • Views 326
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

2 hours ago, Homeward said:

Hi,

 

I like the new animations that underline text. I was wondering if there was a way to add this to accordion titles. So basically there is an animated line that underlines the word. See below for where I would like to place the line. (Yellow highlights where I want it to go.) Also see below for an example of the animated line I am talking about.

 

Thanks

AA23165E-D2CB-4CE5-B666-A0968FBAEA4F.jpeg

79B17015-F527-4453-B4D8-B5974CD70079.jpeg

You can try adding to Home > Design > Custom

[data-is-open="true"] .accordion-item__title {
  text-decoration: underline;
}

Support me by pressing 👍 or marking as solution if this is useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing

image.png.b2f8ff9d96b3469ef6d4f308251e2649.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.