Oops Try Again Did You Remember to Set Your a link to Have a Text decoration of None

In my contempo article almost CSS underline bugs in Chrome, I discussed text-ornamentation-thickness and text-underline-offset, two relatively new and widely-supported CSS backdrop that give us more control over the styling of underlines.

Let me demonstrate the usefulness of text-decoration-thickness on a elementary example. The Ubuntu web font has a fairly thick default underline. We can make this underline thinner like so:

          :any-link {   text-ornamentation-thickness: 0.08em; }        

/explanation Throughout this commodity, I volition utilise the :whatever-link selector instead of the a element to match hyperlinks. The problem with the a tag as a selector is that it matches all <a> elements, even the ones that don't accept a href attribute and thus aren't hyperlinks. The :any-link selector only matches <a> elements that are hyperlinks. Web browsers too use :whatever-link instead of a in their user agent stylesheets.

Hover underlines

Many websites, including Google Search and Wikipedia, remove underlines from links and simply bear witness them when the user hovers a link. Removing underlines from links in trunk text is not a good idea, but it can brand sense in places where links are more spaced apart (navigation, footer, etc.). With that beingness said, here's a simple implementation of hover underlines for links in the website's header:

          header :whatever-link {   text-ornamentation: none; }  header :whatever-link:hover {   text-ornament: underline; }        

But there's a trouble. If we tested this lawmaking in a browser, we'd notice that the underlines in the header take the default thickness, not the thinner fashion that we declared earlier. Why did text-decoration-thickness stop working after we added hover underlines?

Allow's expect at the total CSS lawmaking again. Can yous remember of a reason why the custom thickness doesn't employ to the hover underline?

          :any-link {   text-decoration-thickness: 0.08em; }  header :whatsoever-link {   text-ornament: none; }  header :any-link:hover {   text-ornamentation: underline; }        

The reason for this beliefs is that text-ornamentation is a shorthand property and text-decoration-thickness its associated longhand property. Setting text-decoration to none or underline has the side result of re-initializing the other three text decoration components (thickness, style, and colour). This is defined in the CSS Text Decoration module:

The text-decoration property is a autograph for setting text-decoration-line, text-decoration-thickness, text-decoration-manner, and text-decoration-color in 1 declaration. Omitted values are set to their initial values.

You tin ostend this in the browser'due south DevTools by selecting 1 of the hyperlinks in the DOM inspector and so expanding the text-decoration property in the CSS pane.

In guild to get text-decoration-thickness to piece of work on hover underlines, we'll accept to make a pocket-sized alter to the above CSS code. There are actually multiple ways to accomplish this. We could:

• set text-decoration-thickness subsequently text-decoration,
• declare the thickness in the text-decoration shorthand, or
• use text-decoration-line instead of text-decoration.

Choosing the best text-decoration option

Our first thought might be to simply echo the text-ornament-thickness proclamation in the :hover state. It's a quick and simple ready that indeed works.

          /* OPTION A */  header :any-link {   text-decoration: none; }  header :any-link:hover {   text-decoration: underline;   text-decoration-thickness: 0.08em; /* fix thickness again */ }        

Still, since text-decoration is a shorthand and text-ornament-thickness is its associated longhand, in that location really should be no need to utilise both at the aforementioned time. As a shorthand, text-decoration allows setting both the underline itself and the underline'south thickness, all in one declaration.

          /* OPTION B */  header :whatever-link {   text-ornament: none; }  header :any-link:hover {   text-ornament: underline 0.08em; /* set both line and thickness */ }        

If this code looks unfamiliar to you, that could be because the idea of using text-decoration as a shorthand is relatively new. This belongings was only later on turned into a shorthand in the CSS Text Ornament module. In the days of CSS 2, text-decoration was a simple holding.

Unfortunately, Safari nonetheless hasn't fully caught up with these changes. In the WebKit browser engine, the shorthand variant of text-decoration remains prefixed (-webkit-text-ornamentation), and information technology doesn't back up thickness values however. See WebKit problems 230083 for more data.

This rules out the text-ornament autograph syntax. The to a higher place code won't work in Safari, even if we added the -webkit- prefix. Luckily, there's another way to avoid repeating the text-decoration-thickness declaration.

When text-ornamentation was turned into a shorthand, a new text-decoration-line longhand was introduced to take over its old job. Nosotros tin employ this property to hide and show the underline without affecting the other 3 text decoration components.

          /* OPTION C */  header :any-link {   text-decoration-line: none; }  header :any-link:hover {   text-ornament-line: underline; }        

Since we're simply updating the line component of the text-ornamentation value, the previously declared thickness remains intact. I think that this is the best way to implement hover underlines.

Exist aware of shorthands

Keep in mind that when you lot gear up a shorthand holding, e.g., text-ornament: underline, any missing parts in the value are re-initialized. This is also why styles such as groundwork-repeat: no-repeat are undone if yous gear up groundwork: url(flower.jpg) afterward. See the article "Accidental CSS Resets" for more examples of this beliefs.

sadlervaniffew.blogspot.com

Source: https://css-tricks.com/when-to-avoid-css-text-decoration-shorthand/

Share this post