Change line properties for links (e.g. text-decoration-thickness, text-decoration-color etc.)

I Need Help
1

Hi there!

If links are marked with an underline, I would love to edit the line properties. In other words, the color and weight of the line, the distance and placement in relation to the text, etc. Is that possible?

Kind regards

2

Yes it is.
Use “Classes” to edit that stuff.

Rich the Weather Guy

3

You’re hilarious, I got my humor for the whole day, just thinking about your comment.

4

Hi Weatherguy,

I know what classes are. :wink: But as far as I know nothing modifies the properties of link underlines there, does it? – And I mean defining the properties (weight x px, x px distance from text, dotted line instead of solid etc. as in CSS text-decoration-thickness or text-decoration-color for example) – not just unlerline yes/no. Please correct my if I’m wrong. I’m here to learn. :slightly_smiling_face:

Kind regards

5

If you mean the underline of a link, I don’t think that’s possible.
Maybe others here in the forum know better.

1 Like
6

I have done some research and here is the more precise question: Do I have to write the CSS lines (text-decoration-thickness etc) manually and add them to the code or can I edit this somewhere in the Classes window and I just haven’t found it yet?

7

Is this any help?

1 Like
8

Merci, that looks like a way to solve the problem, but I was honestly hoping for a more non-coder friendly option. :wink:

9

Hi @indianink
Yes, as @WeatherguyNH and @Bloccali said, using classes is definitely the right solution. You can style your links either with Bootstrap utility classes or with custom CSS. For example:

.my-underlined-anchor {
    text-decoration: underline;
    text-decoration-color: #3366cc;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-style: solid;
}

This approach works perfectly for anchor links and gives you full control over the underline appearance.
Hope that helps.

4 Likes
10

Thanks! That’s the answer I was looking for. :ok_hand:

11

It doesn’t show in blocs itself but in the browser preview, am I right?

12

Correct. There has been requests for CSS added to the CSS input zone to show on the design canvas…. but no luck :roll_eyes:. You can add the CSS using a code bric and style tags, and it will show on the canvas though. But that is messy I guess.

The other option is to use pseudo elements (::before/::after) and create a line using height. You can do this in the class manager. I often take this approach for flexibility, depending on the design requirements.

1 Like
13

@PeteSharp has just answered to your question, to fast :grin:

14

I’m really, really sorry guys, but I’m getting increasingly confused. What height are you talking about? I’ve read this somewhere on stackoverflow in my research today too but unfortunately I haven’t bookmarked it. …

15

Is there perhaps a relationship between the individual values? It only shows the distance to the text in 10px increments, dashed lines not at all, and this is actually only in the Safari preview. …

16

Hi @indianink

Safari has a lot of issues with advanced CSS underline styles, stuff like dashed or wavy lines, or precise offsets, often just doesn’t work right or only shows up in big steps. Always check your links in Chrome or Firefox to see how your CSS really looks.

For Safari, you pretty much have to stick with basic solid underlines and not expect pixel-perfect control.

Yep, it’s the 21st century and Safari still can’t handle CSS properly. But hey, liquid glass effects are coming soon… because that’s obviously way more important than proper CSS or useful AI for users!

2 Likes
17

In my case it was Frefox that was behaving weirdly, Safari was fine. :smiling_face:

1 Like