SVG Text Underline – GeneratePress

This topic has 17 replies, 3 voices, and was last updated 2 years, 5 months ago by Ying.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts
December 2, 2022 at 2:51 am #2446399

Paul

Hi There,

I’d like to use a .svg to as a text underline. I added a span with a class of
.callout to the h1 (link in private info – currently has a non svg underline).

I thought I could adapt this CSS but can’t get it to work in gp
https://codepen.io/iam_aspencer/pen/qvNPBv

Perhaps not the best way of approaching it?

Cheers

December 2, 2022 at 4:14 am #2446499
David
Staff
Customer Support
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.
December 2, 2022 at 5:14 am #2446578

Paul

Love it! That’s perfect – Cheers David 🙂

December 2, 2022 at 5:43 am #2446623

David
Staff
Customer Support

You’re welcome

January 26, 2023 at 4:52 am #2509639
Paul
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
January 26, 2023 at 5:01 am #2509662

David
Staff
Customer Support

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

January 26, 2023 at 5:41 am #2509697

Paul

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

January 26, 2023 at 6:08 am #2509723

David
Staff
Customer Support

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.

January 26, 2023 at 6:39 am #2509767

Paul

Great thanks for the advice David – I’ll do that.

January 26, 2023 at 6:47 am #2509783

David
Staff
Customer Support

You’re welcome

April 9, 2023 at 6:39 am #2602899

Paul

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

April 9, 2023 at 12:31 pm #2603330

Ying
Staff
Customer Support

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.

April 11, 2023 at 5:48 am #2605486

Paul

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

April 11, 2023 at 9:58 am #2605981
Ying
Staff
Customer Support
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;
```
April 11, 2023 at 11:01 am #2606063
Paul
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;
}
```
Author

Posts

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] SVG Text Underline

Popular Articles

Start building better websites today.