Customize TT5's link styles

[beafialho]

Because the link styles usually look a bit rough, I suggest we add something like the following, unless someone has a better alternative, to improve the appearance of the theme's link underlines.

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

Here's a before/after:

[beafialho]

cc: @carolinan @juanfra @richtabor

[carolinan]

I think we should add this to style.css (!) and not theme.json, for the same reasons mentioned in
#6

[beafialho]

Yes, my intent was to add it to style.css

[carolinan]

I wonder if there should also be an animation to ease it in and out?

[beafialho]

I wonder if there should also be an animation to ease it in and out?

That would be so cool!

[melchoyce]

It's not currently possible to add an animation between text-decoration: none and text-decoration: underline. The only properties that can animate are text-decoration-color and text-decoration-thickness. I've tried a few iterations of animating text-decoration-color and don't think it'll work based on how the styles are set up. In order to add an animation, we'd need to refactor the underline styles to use pseudo-classes instead of text-decoration for link styles.

[carolinan]

Thank you @melchoyce. I will close this issue as completed. 😞