SVG Text Underline

Hi there,

i would:

1. Don't edit the HTML to add the span. Instead, highlight the text you want underlined, and in the Headlibe Blocks toolbar select the ( first ) highlight option.
This will wrap the selected text in mark tags.

2. With the H1 headline block still selected, in Advanced > Additional CSS Class(es) add: has-callout

3. Then use this CSS:

.has-callout mark {
    background-color: inherit;
    color: inherit;
    position: relative;
}

.has-callout mark:after {
  content: "";
  position: absolute;
  bottom: -0.125rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 0.75rem;
  z-index: -1;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/664131/underline.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

You need to change the background image URL which is from the code pen.

Love it! That's perfect - Cheers David :)

You're welcome

Hi David,

Hope you are well!

I tried updating the background image linked in the CSS below (with this image https://the-zag-v9.instawp.xyz/wp-content/uploads/2023/01/squiggle-underline-04.svg ) but doesn't seem to work - Any ideas what I'm doing wrong?

/* Callout SVG underline */
.has-callout mark {
    background-color: inherit;
    color: inherit;
    position: relative;
}

.has-callout mark:after {
  content: "";
  position: absolute;
  bottom: -0.125rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 0.75rem;
  z-index: -1;
  background-image: url("https://the-zag-v9.instawp.xyz/wp-content/uploads/handdrawn-line-02-2.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

Thanks

Have you tried clearing the browser cache? As i can see it below: Gym and Your

Hi David,

Ah yes that was the previous image that works.

I've updated the image URL and now you'll see that the image is not visible gym has mark tags.

Thanks
Paul

Ah, ok, so your SVG has a lot of negative space above and below the line.
If you increase the CSS property: height: 0.75rem; to a larger value eg 5rem you will see it appear.

Ideally you want to trim out that negative space from the SVG.

Great thanks for the advice David - I'll do that.

You're welcome

Hi David,

Happy Easter! Hope you are well!

I just ran into an issue with the .has-callout call class.

It was added to a word in the h1 in the page linked to but not displaying for some reason - any ideas why (works fine set to words in the paragraphs below the h1)?

Thanks
Paul

Hi Paul,

It's because the SVG is underneath the background color of the content container.

You need to:

1. clear the content container's background color at customizer > colors > content.
2. clear the very outside GB container's background color in the page editor.

Hi Ying,

Thanks for that!
Now updated and seeing the svg underline(s) :)

Do you have any tips on how I could update the .svg CSS to show the underline consistently in terms of size when used?
(it's used on the h1s on homepage and newsletter page, ideally I'd like to span the entire word it's applied to - this does seem to work when applied to words with p tags (testimonials on newsletter page for example)

Perhaps the SVG is too small?

Thanks

The size of the SVG is relative to the mark, and you can adjust these values to adjust the SVG size:

bottom: -0.125rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 0.75rem;

Perfect thanks Ying - that works! :)

Do you know how I could add a combo class to the just the h1 on the homepage to give that 1rem bottom - I already have the following:

h1.has-callout mark:after {
	bottom: 0rem;
}

p.has-callout mark:after {
	bottom:-0.5rem;
}

So I added a class to the h1 container on the homepage .home-hero then tried adding:

.home-hero h1.has-callout mark:after {
	bottom: 1rem;
}