From the author: styling link underlines is a tricky business, and I keep forgetting which method is best for a given situation. Luckily, John Jameson will help us quickly figure this out in his article.

There are many ways to style underlines. You may remember the article "Create underscores for Medium links." Medium didn't try to do something out of the box, they just wanted to create attractive underlines in the text.

Thin, black underlines with spaces around letters with bottom leaders is the work of Marcin Whitchery in Creating Medium Link Underlines.

Good standard underline that is also well sized and omitted any descenders. Much better than most default browsers. As it turns out, Medium faced many challenges along the way. And even two years later, good underline styling is still causing a lot of problems.

Goals

Why not just use text-decoration: underline? If we are talking about an ideal scenario, the underscores should:

be below the baseline;

skip the lower extension of the letters;

change color, thickness and styles;

go to a new line;

work with any backgrounds.

I believe that we may well require all of this from underlines, however, as far as I know, there is no intuitive way to solve all of these tasks in CSS.

Approaches

So what ways do we have for underlining text? I remembered the following:

text-decoration;

background-image;

SVG filters;

Underline.js (canvas);

text-decoration- *

Let's go through the entire list and consider all the pros and cons of each approach.

The text-decoration property

The text-decoration property is the simplest way to underline text. Only one property needs to be applied. On small text, such a line will look fine, but if you increase the font size, it already looks awkward.

The biggest problem with the text-decoration property is the lack of customization. The line uses the color and font size of the text to which it is applied, and there is no cross-browser way to change styles. We'll talk about this property in more detail later.

pros

easy to use;

is below the baseline;

skips ascenders by default in Safari and iOS.

jumps to a new line;

works with any backgrounds.

Minuses

does not skip extension bottom parts of letters in other browsers;

color, thickness and styles cannot be changed.

The border-bottom property

The border-bottom property is a good balance of speed and customization. This approach uses proven CSS borders, which means you can easily change color, weight and styles. This is what the border-bottom property looks like on inline elements:

The biggest disadvantage is how far the underline is from the text. The underline is located below the descenders of the letters. This problem is solved by making the element inline-block and decreasing the line-height, but then the ability to jump to new lines is lost. Good for single lines, but no more.

In addition, you can use text-shadow to hide portions of the line around the bottom leaders. In this case, you will have to simulate the background color, which means that the method only works on uniform backgrounds. Gradients and images won't work.

There are currently 4 properties for styling the underline. Much better than just text-decoration.

pros

you can use the transition property and animate the color and thickness;

jumps to newlines by default if the element is not inline-block;

Minuses

the line is very far away and difficult to move;

too many superfluous properties need to be used for the underline to look good;

poor selection of text when using text-shadow.

The box-shadow property

The box-shadow property draws an underline using two inner shadows: one creates a rectangle and the other hides it. This means that a uniform background is needed for the method to work properly.

The same text-shadow trick can be used to simulate white space around the bottom leaders of the letters. If the color of the line is different from the text, or it is thin enough, then there should be no problems, as is the case with text-decoration.

pros

can be positioned below the baseline;

you can skip callouts using text-shadow;

you can change the color and thickness;

jumps to new lines.

Minuses

styles cannot be changed;

does not work with all backgrounds.

Background-image property

The background-image property is the best for our purposes, and it has very few downsides. The idea is that you create an image with a linear-gradient and background-position that repeats on a horizontal axis along lines of text. The element must be display: inline ;.

The demo below does not use linear-gradient. To create a cool effect, you can use your own image.

pros

can be positioned below the baseline;

you can skip bottom leaders using text-shadow;

you can change color, thickness (even by half a pixel) and styles;

works with custom images;

jumps to new lines;

works with any background as long as text-shadow is not used.

Minuses

image size can vary in different ways for different resolutions, browsers and zoom levels.

SVG filters

I played with this method. You can create an inline SVG filter element that draws the line, and expand the text to mask out parts of the line that need to be transparent. A filter can be id and referenced in CSS using filter: url (‘# svg-underline’).

What's the plus - the filter adds transparency without relying on text-shadow. That is, you can skip the bottom letter leaders on any background, including gradients and images! The example below only works with one line of text, so be careful.

And this is how it looks in Chrome and Firefox:

IE, Edge and Safari-enabled issues are experiencing issues. It is difficult to test support for SVG filters in CSS. You can use the @supports rule on filter, but this will only check if the link itself works, not whether the filter was applied or not. My way is pretty crude with browsers, so be doubly careful.

pros

located below the baseline;

skips bottom leaders;

you can change color, thickness and styles;

works on any background.

Minuses

does not jump to new lines;

does not work in IE, Edge and Safari, but you can specify text-decoration as a fallback. Safari underlines look great on their own.

Underline.js (Canvas)

Underline.js is an amazing library. I'm impressed with what Wenting Zhang was able to do with JS and attention to detail. If you haven't seen the Underline.js technical demo yet, stop for a minute and have a look. There is a wonderful nine-minute talk on the net on the topic of working principles, I will quickly retell it to you now. The underlines are drawn using canvas. A completely new approach that works surprisingly well.

Despite the attractive name, this is just a technical demo. That is, you cannot immediately put the library into the project without a whole bunch of changes.

This library is only worth mentioning as a proof of concept. Canvas has the potential to create beautiful, interactive underlines, but you'll have to write additional JS code to work properly.

Text-decoration- * properties

Remember when I said that we will analyze something in more detail later? Now we will do this. The text-decoration property works well on its own, but we can add a couple of experimental properties for an even better look:

text-decoration-color

text-decoration-skip

text-decoration-style

Don't be overjoyed, you know about browser support.

The text-decoration-color property

The text-decoration-color property allows you to change the color of the underline separately from the color of the text. The property even has good browser support. It works in Firefox and is prefixed in Safari. On the downside, if you don't clear the line around the leaders, in Safari it will overlap the text. Firefox:

The text-decoration-skip property

The text-decoration-skip property is responsible for skipping bottom leaders in underlined text.

This property is non-standard and currently only works in Safari. To work in other browsers, you need to use the -webkit- prefix. Safari has this property turned on by default, which is why underscores skip bottom callouts even on sites where this property is not specified.

If you are using Normalize, you need to be aware that recent versions disable the property to work properly in all browsers. If you want to bring back those almost magical underscores, you need to enable this property.

The text-decoration-style property

The text-decoration-style property offers the same set of underlines as the border-style property, but also adds a new look - wavy. Possible values:

Right now the text-decoration-style property only works in Firefox, below is the screenshot:

A set of solid underlines. Looks similar?

What's wrong?

The text-decoration- * properties are more intuitive than other properties for styling underlines. However, if you look differently at the requirements that we presented earlier, you will notice that using these properties you cannot change the thickness and position. After a little research, I found these two properties:

text-underline-width

text-underline-position

It looks like these properties were dropped from an early version of CSS due to lack of interest in them. They were never used. Hey, this isn't my fault.

conclusions

So what's the best way to underline text? It all depends on various factors.

For small text, I recommend using text-decoration and the experimental text-decoration-skip property, hoping it will work. It looks so-so in most browsers, but it has always been like this and people didn't pay attention to it. If you are patient enough, chances are that soon all your underlines will look good and you won't have to change anything.

Use background-image for body text. The method works, it looks nice, and there are Sass mixins for it. If the underline is thin, or the color differs from the text, you can most likely skip the text-shadow method. For text on one line, use border-bottom and any other properties.

And for skipping letter leaders on gradient backgrounds or images, try using the SVG filter. Or just don't mix such backgrounds with underlines. In the future, when browser support improves, the text-decoration- * properties can be used.

Underlining can be of different types, respectively, the methods of creating it differ. A few popular ones are listed below.

Using text-decoration

The text-decoration property set to underline adds an underline to the text; this kind of underscore can be seen for default links. The line created in this way is equal to the width of the text and will be the same color as the heading itself. You can change the line color through the text-decoration-color property. Example 1 shows the application of text-decoration to an element

.

Example 1. Using text-decoration

The result of this example is shown in Fig. 1.

Rice. 1. View of the line created through text-decoration

IE and Edge browsers do not support the text-decoration-color property.

Using border-bottom

Property border-bottom adds a line of specified width, color and style to the element below. This line takes up the entire available width, regardless of the length of the heading text (Figure 2).

Rice. 2. View of the line created with border-bottom

The distance from the line to the text can be adjusted using the property padding-bottom as shown in example 2.

Example 2. Using border-bottom

Cultural speech act in the 21st century

Indeed, the myth-generating textual device illustrates discourse, and this gives it its own sound, its own character.

To make the line the width of the text, it is enough to turn the heading into an inline-block element by adding the property to the h2 selector display with the value inline-block.

Using :: after and content

You can also make an artificial line through a combination of properties content and pseudo-element :: after... They will only display an empty pseudo-element after the header, and the appearance of this pseudo-element is determined by other properties. In fig. 3 shows a similar line.

Rice. 3. The line created through :: after

The position of such a line relative to the text is set through the property bottom with a negative value, the color of the line through the property background... In fact, this is not a line, but a rectangular block, so we use a background fill (example 3).

Example 3. Using :: after

Cultural speech act in the 21st century

Indeed, the myth-generating textual device illustrates discourse, and this gives it its own sound, its own character.

The CSS property text-decoration is responsible for decorating text in terms of underlines. You can make a bottom, top underline. You can also strike out text or apply all underlines at once.

CSS text-decoration syntax

... text-decoration: none | underline | overline | line-through | inherit; ...

• none - text without decoration
• underline - underline
• overline - overline
• line-through - strikethrough text
• blink - blinking text (it is recommended not to use this value)

Multiple values ​​can be specified. For example

text-decoration: underline overline;

How to change the style and color of the underline

There is a special property text-decoration-style to change the style of the underline:

text-decoration-style: solid | double | dotted | dashed | wavy;

• solid - solid underline
• double - double line
• dotted - dotted line
• dashed - dashed line
• wavy - wavy line

To change the color of the underline, use the text-decoration-color property:

text-decoration-style: color;

color can take values ​​in the form of RGB, color names (see codes and names of html colors for the site)

Note

Unfortunately, the text-decoration-style and text-decoration-color property is not supported by almost all browsers (it's already 2016).

Examples with underscores

Example 1. Simple underline

Plain text. Underscore Top underline

Plain text.

Underscore

Top underline

Underscore and underscore

Example 2. Strikethrough text

Plain text. Strikethrough text

This is how it looks on the page:

Plain text. Strikethrough text

Example 3. Changing the color and type of underline

Plain text.

This is how it looks on the page:

Plain text.
Red underline with dotted line

Note

If you don't see any changes in the last example, then you can try using the proven method using the border-bottom property:

border-bottom: 1px datted red;

To access text-decoration from JavaScript, you need to write the following construction:

object.style.textDecoration = "VALUE" (! LANG:

There are a bunch of different ways to style an underline. You may recall Marcin Vichari's article “Crafting link underlines” on Medium. The Medium devs aren't trying to do something crazy, they just want to create a nice line below the text.

This is the simplest underline, but it is the correct size and does not overlap the descenders of the letters. And it's definitely better than the default underscore in most browsers. Medium has struggled to achieve its style on the web. Two years later, we still have a hard time getting a nice underline.

Goals

What's wrong with the familiar text-decoration: underline? For an ideal scenario, the underline should do the following:

• positioned below the baseline;
• skip remote elements;
• change the color, thickness and style of the line;
• work with multi-line text;
• work on any background.

I believe these are all reasonable requirements, but as far as I know there is no intuitive way to achieve this with CSS.

Approaches

So what are these different ways that we can implement underlining on the web?

Here are the ones I am considering:

• text-decoration;
• border-bottom;
• box-shadow;
• background-image;
• SVG filters;
• Underline.js (canvas);
• text-decoration- *.

Let's analyze these methods one by one and talk about the pros and cons of each of them.

text-decoration

text-decoration is the most obvious way to underline text. You apply one property and that's enough. It might look pretty decent at small font sizes, but increase the font size and this underline starts to look awkward.

The biggest problem with text-decoration is the lack of customization. You are limited to the color and font size of the text and you have no cross-browser way to change this. We will talk about this in more detail.

• easy to use;
• positioned below the baseline;
• skips descenders by default in Safari and iOS;
• underlines multiline text;
• works on any background.

• does not skip descenders in all other browsers;
• does not allow changing the color, weight or style of the line.

border-bottom

border-bottom offers a good balance between simplicity and customization. This approach uses the good old CSS border property, which means you can easily change the color, weight, and style.

This is how border-bottom looks like on inline elements.

The main drawback is the distance of the underline line from the text, it is entirely below the descenders. You can fix this by setting the elements to inline-block and decreasing the line-height, but then you will lose the ability to wrap text. Good for single stitches, but not useful anywhere else.

Additionally, you can use text-shadow to overlap some of the line next to the descenders, mimicking this with the same color as the background. That is, this technique only works on a simple monochrome background, no gradients, patterns or images.

At the moment, we are already using as many as four properties to style one line. This is a lot more work than just adding text-decoration.

• can skip callouts using text-shadow;
• can change color, weight and line style;
• allows you to use transitions and animations of color and weight;
• works with multiline text unless inline-block is applied;
• works on any background as long as you don't use text-shadow.

• positioned too low and moved in a difficult way;
• many additional properties are used to work properly;
• when using text-shadow, text selection looks ugly.

box-shadow

box-shadow draws a descender with two inner shadows: one creates a rectangle, and the other hides part of it. This means you need a solid color background for this to work.

You can use the same text-shadow trick to fill in the gaps between the underline and the descenders. But if the color of the underline is different from the color of the text — or it’s just thin enough, the line will not collide with the descenders as it does with text-decoration.

• allows you to change the color and thickness of the line;
• works with multi-line text.

• does not allow changing the underline style;
• does not work on any background.

background-image

The background-image method is closest to our desire and has the fewest drawbacks. The idea is to use linear-gradient and background-position to create an image that repeats below the lines of text.

For this approach to work, the text needs to be in standard display: inline mode; ...

The next option does without linear-gradient, for effects you can add your own background image.

• can be positioned below the baseline;
• can skip callouts due to text-shadow;
• works with custom images;
• wraps several lines of text;
• works on any background, as long as you don't apply text-shadow.

• image size may vary depending on screen resolution, browser and magnification.

SVG Filters

I've played a lot with this method. You can create an SVG inline filter that draws a line and then expands the text to mask out the part of the line that we want to make transparent. Then you can give the filter an id and link to it in CSS like filter: url (‘# svg-underline’).

The advantage of this approach is that transparency is achieved without applying text-shadow, which means we skip the callouts on any background, including gradients and background images! This only works on a single line of text, keep that in mind.

This is how it looks in Chrome and Firefox:

IE, Edge and Safari support is problematic. It is difficult to test the SVG filter support in CSS. You can use the @supports directive with filter, but this will only check if the filter reference works, but not the filter itself. My attempts ended in a dreary definition of the browser's capabilities, this is a noticeable drawback of the method.

• can be positioned below the baseline;
• can skip remote elements;
• allows changing the color, thickness and style of the line;
• works on any background.

• does not work with multiline text;
• doesn't work in IE, Edge and Safari, but you can use text-decoration as a fallback, it looks decent in Safari.

Underline.js (Canvas)

Underline.js is mesmerizing. I find it impressive what Wentin Zhang has done with her JavaScript skills and attention to detail. If you haven't seen the Underline.js technical demo, stop reading and take a minute of your time. There is also her nine-minute talk on how it works, but I will describe briefly: the underline is drawn using elements ... This is a new approach that works surprisingly well.

Despite the catchy name, Underline.js is just a technical demo. This means that you can't just take this and plug it into your project without changing the code.

I decided to mention this as a proof of concept that has the potential to create beautiful interactive underlines, but for this to work, you need to write your JavaScript.

New text-decoration properties

You will remember that I promised to talk more about text-decoration. The time has come.

This property itself works great, but you can add some experimental properties to customize the appearance of the underline.

• text-decoration-color
• text-decoration-skip
• text-decoration-style

But don't be too happy ... Browser support - as always. So it goes.

text-decoration-color

The text-decoration-color property allows you to change the color of the underline separately from the color of the text. Support for this property is better than you might expect - it works in Firefox and prefixed in Safari. Here's the catch: if you have callouts, Safari will place an underline over the text.

text-decoration-skip

The text-decoration-skip property enables skipping of descenders in underlined text.

This property is non-standard and currently only works in Safari, with the -webkit- prefix. Safari activates this property by default, so the callouts are not always strikethrough.

If you are using Normalize, please note that recent versions disable this property for the sake of consistent browser behavior. And if you want the underline not to affect the descenders, you need to manually activate it.

text-decoration-style

The text-decoration-style property offers the same styling capabilities as the border-style property, with the addition of the wavy style.

Here is a list of the available values:

• dashed
• dotted
• double
• solid

Currently the text-decoration-style property only works in Firefox, here's a screenshot from it:

What is missing

The text-decoration- * series of properties are much more intuitive to use than the rest of the CSS properties for underline styling. But if you take a closer look, there are not enough ways to set the thickness or position of the line to satisfy our needs.

After a little research, I found a couple more properties:

• text-underline-width
• text-underline-position

They appear to be early drafts of CSS, but have never been implemented in browsers due to lack of interest.

conclusions

So what's the best way to underline?

For small text, I recommend using text-decoration with the optimistic addition of text-decoration-skip. It looks a little tasteless in most browsers, but browsers have always had underlines and people just won't pay attention. Plus there is always a chance that if you have the patience, this underline will look good someday without you having to change anything, as browsers will.

For body text, it makes sense to use background-image. This approach works, looks great, and there are Sass mixins for it. You can, in principle, omit the text-shadow if the underline is thin or different in color from the text.

For single lines of text, use border-bottom along with any additional properties.

And if you need to skip descenders against a gradient or image, try using SVG filters. Or just avoid using underscores.

In the future, as browser support improves, the only answer will be the text-decoration- * property set.

I also recommend checking out Benjamin Woodruff's article CSS Underlines Suck, which addresses the same issues.

Allows you to make different underlines in HTML: underline, overline, line-through, etc. Let's combine this chip with the previous one and get:

The second line shows how everything is written in one row with text-decoration.

text-decoration-style - text underline style

This option sets the appearance of the decorative line for / link. The new CSS guidelines have added wavy and double values, now there are only 5:

• solid - solid line;
• double - double (from the first example above);
• dotted - consists of a sequence of dots;
• dashed - allows you to make a dashed CSS underline;
• wavy - a spectacular wavy line.

text-underline-position - CSS positioning of the underline

With this property, you can control the position of the line relative to the font glyph.
There are 4 options available:

• auto - is located as close as possible to the baseline of the text;
• under - under the very bottom border of the font;
• left and right are left / right for records displayed vertically.

Here is a visual difference between underlining text with under and auto:

The difference, I think, is quite obvious.

text-decoration-skip - remove underlining for elements

Using the option, you can cancel (skip) the decoration of some elements in the HTML line. To better understand the valid values ​​of spaces, objects, box-decoration, edges, ink, I will duplicate the picture from the previous post:

That is, for example, with ink, you can make an underscore in CSS that does not intersect with characters. The objects value allows you to skip inline-block elements - insert a span, and the solid line breaks at the appropriate place:

The box-decoration, spaces, edges parameters are much less well supported by browsers, so their result sometimes differs from what is expected. Here is the compatibility / support status of text-decoration at the time of writing:

Additional features for underlining links

Novice users often ask some typical questions on the topic, so we also decided to consider them. A general example is at the very bottom after the explanations.

How to remove the underline from a link

a: hover (text-decoration: underline;)

Both examples below will help you understand the logic of work on hover: either you initially specify the underlining of links in CSS, and then remove it in the hover, or vice versa.

If you have any more questions on the topic, ask them in the comments. We will try to consider later or suggest in the answers. The main thing in this case is practice - try adding different properties for the text-decoration option directly in the examples, or create your own test file. Hopefully, the topic of underlining text and links in CSS / HTML has become clear.