I just lately gave my private web site a makeover and included just a few cool little CSS methods. Over the subsequent few posts I’ll share a few of these. The primary one is all about underlines. Hover over any of the hyperlinks within the physique copy on the location and also you’ll discover the underline transitions downwards. On the net it’s fairly frequent to seeing animated underline results utilizing pseudo-elements and/or borders. Attempt hovering on the examples on this demo.
See the Pen
Animated with pseudo parts by Michelle Barker (@michellebarker)
on CodePen.
These work nice for single, quick strains of textual content (akin to navigation hyperlinks), however not for multi-line textual content. We will animate an underline on multi-line textual content with intelligent use of linear gradients, together with background-size and background-position. Right here’s an instance, and an awesome article about the way to implement this system.
See the Pen
Animated underline with background by Michelle Barker (@michellebarker)
on CodePen.
This strategy has its limitations, nonetheless: it requires the textual content to be an inline component, so it really works effectively for anchor hyperlinks in a paragraph of textual content, say. However should you needed an animated underline on a heading component you’d doubtless want to change the markup so as to add a <span> contained in the component, which isn’t all the time an possibility.
“Actual” underlines
With a number of the newer text-decoration- properties, we will animate the precise underlines — far superior to only letting our underlines blink out and in of existence on hover. Any by animating actual underlines, we will retain the great characteristic that the majority browsers give us, the place the underline skips the textual content’s descenders (the default for the text-decoration-skip-ink property).
For essentially the most primary instance, we will implement a fade-in impact. We will’t animate the opacity of a textual content underline, however we can animate it from clear to our desired color. Firstly we set the text-decoration-style property to underline. Right here I’m utilizing the shorthand text-decoration to specify the text-decoration-thickness and text-decoration-color on the identical time. We will set the color to a clear worth. Then on hover, we will transition it to an opaque worth:
a {
text-decoration: underline 0.15em rgba(0, 0, 0, 0);
transition: text-decoration-color 300ms;
}a:hover {
text-decoration-color: rgba(0, 0, 0, 1);
}
See the Pen
Easy fade underline animation by Michelle Barker (@michellebarker)
on CodePen.
That’s higher than the default, however pretty primary. Even higher, we will transition the text-underline-offset property, which is comparatively new however has widespread browser assist. Right here’s how I’m utilizing it by myself website:
a {
text-decoration: underline 0.15em rgba(0, 0, 0, 1);
text-underline-offset: 0.2em;
transition: text-decoration-color 300ms, text-underline-offset 300ms;
}a:hover {
text-decoration-color: rgba(0, 0, 255, 1);
text-underline-offset: 0.4em;
}
Models
As a aspect observe, I like utilizing em items for these values as a result of they’re relative to the font measurement, which suggests if now we have textual content that’s bigger or smaller the underline will scale proportionally.
Browser assist
The above works nice…in Firefox. Proper now, no different browsers seem to assist transitioning or animating text-underline-offset. (The identical applies to text-decoration-thickness, which might additionally permit for some fascinating results.) However fortunately, there may be another strategy to animating these properties…
Houdini to the rescue
With out entering into the wonderful technical particulars, CSS Houdini is a set of low-level APIs that expose components of the browser’s CSS rendering engine to builders. It permits us to register a customized property and animate it with CSS. Beforehand builders wanted to register the property in Javascript, however now it’s presumably to do it totally with CSS, utilizing @property. Una has a nice article explaining precisely the way to use it and a number of the issues which might be doable.
For our functions, we will register a property referred to as --offset, which we’ll use for the text-underline-offset worth.
@property --offset {
syntax: '<size>';
inherits: false;
initial-value: 0px;
}It’s vital to set an preliminary worth, in any other case it received’t work. For some cause ems don’t appear to work as an preliminary worth, though I’m unsure why.
Then, as an alternative of transitioning text-underline-offset, we transition the customized property itself:
a {
transition: --offset 300ms, text-decoration-color 300ms;
}a:hover,
a:focus {
--offset: 0.4em;
text-decoration-color: rgba(0, 0, 255, 1);
}
Testing for assist
Sadly, transitioning customized properties with Houdini just isn’t supported in Firefox or Safari – so we’re again to the earlier drawback of getting an answer with restricted browser assist! However by no means worry, we can implement a cross-browser resolution — with belt and braces!
We will use a characteristic question to detect whether or not a browser doesn’t assist Houdini (this question pertains to the Paint API). For browsers that don’t assist Houdini, we’ll as an alternative transition the text-underline-offset property — which, fortunately, works in Firefox and Safari!
@helps not (background: paint(one thing)) {
a {
transition: text-underline-offset 400ms, text-decoration-color 400ms;
}a:hover,
a:focus {
text-underline-offset: 0.4em;
}
}
Right here’s the answer in full:
See the Pen
Underlines (Chrome resolution with Houdini) by Michelle Barker (@michellebarker)
on CodePen.
