Link Underlines That Animate Into Block Backgrounds

This neat effect enhances standard link underlines. The default underlined link, on hover, transforms the underline into a thicker line, mimicking a background color effect.

Observe this effect on the Superfriendly site:

Several approaches exist:

• Box-shadow: Superfriendly uses box-shadow: inset 0 -0.07em 0 #0078d6; which transitions to box-shadow: inset 0 -0.85em 0 #a2d5fe; on hover. Andres Cuervo adapted this, and a corrected version addresses initial offset issues. This method handles line breaks effectively.
• Pseudo-elements: Absolutely positioning a pseudo-element within the link and animating its height or scaleY is another option. However, this method struggles with links that wrap to new lines.
• Linear-gradient: Using a linear-gradient with sharp color stops simulates an underline, and animating the background-position on hover creates the effect. This approach manages line breaks better than pseudo-elements. Similar examples exist in previous articles.
• text-decoration properties: Modern text-decoration: underline; offers text-decoration-skip-ink;, elegantly avoiding descenders. New properties like text-decoration-color, text-decoration-thickness, and text-decoration-offset provide fine-grained control, enabling this effect. Miriam Suzanne's Firefox Nightly demo showcases this superior approach (browser compatibility pending).

Conclusion: For immediate, broad browser support, the box-shadow technique is recommended. However, for enhanced aesthetics, control, and code readability, the newer text-decoration properties are the preferable long-term solution once wider browser support is established.

The above is the detailed content of Link Underlines That Animate Into Block Backgrounds. For more information, please follow other related articles on the PHP Chinese website!