Css wavy line. Underlining links and text via CSS, the text-decoration property

We continue to do tricks in pure css. Today I will tell you how to make a beautiful one using css dividing line in the form of a wave on the site. It can be used, for example, to visually separate blog posts, or separate blocks in the sidebar.

Once I already talked about. But it used the hr dinosaur tag with a couple of tricky styling rules to play around with the shadow.

Today the situation is completely different. To display a line in the form of a wave, you will have to add a lot more tricks to the rules and apply not just css, but css3. Welcam!

For starters, the usual html code. We will draw the lines as empty divs with special sets of rules. Empty blocks are, of course, evil. But sometimes you have to put up with it.

Here we have shown 4 types of lines. And this is how a set of styles in css for them will look like:

Wave (
overflow: hidden;
position: relative;
width: 630px;
height: 50px;
}
.line (
position: absolute;
width: 630px;
height: 26px;
}
.line1 (

}
.line2 (

}
.line (
background-size: 50px 50px;
}
.smallLine (
position: absolute;
width: 630px;
height: 5px;
}
.smallLine1 (
background: linear-gradient (45deg, transparent, transparent 49%, black 49%, transparent 51%);
}
.smallLine2 (
background: linear-gradient (-45deg, transparent, transparent 49%, black 49%, transparent 51%);
}
.smallLine (
background-size: 10px 10px;
}
.circle (
position: absolute;
width: 630px;
height: 20px;
background: radial-gradient (16px, transparent, transparent 4px, black 4px, black 10px, transparent 11px);
background-size: 30px 40px;
}
.circle2 (
top: 20px;
left: 15px;

}
.ellipse (
position: absolute;
background: radial-gradient (ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
background-size: 36px 40px;
width: 630px;
height: 20px;
}
.ellipse2 (
top: 20px;
left: 18px;
background-position: 0px -20px;
}

Here we used tricks like linear-gradient and radial-gradient from the css3 arsenal.
There is another option for using a dividing line in the form of a wave (the lowest one in the illustration at the beginning of the post). It can be used at the end of a block, as a bottom decoration. The code is simple enough. First the html:

Let's apply the: before and: after pseudo-elements in the css rules. You can read about them. This is what the code will look like:

Wave (
width: 630px;
background: # 333;
height: 30px;
position: relative;
}
.wave :: before (
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient (circle at 10px -5px, transparent 12px, # 19d1ff 13px);
}
.wave :: after (
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient (circle at 10px 15px, # 19d1ff 12px, transparent 13px);
}

That's all! Go for it!

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 Underlines 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, the still good styling of underlines causes 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 can 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 negative is how far the underline is from the text. The underline is located below the descenders of the letters. This problem can be 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 unnecessary properties need to be used for the underline to look good;

poor selection of text when using text-shadow.

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 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 linear-gradient and background-position that repeats on the horizontal axis along lines of text. The element must be display: inline ;.

The demo below does not use linear-gradient. You can use your own image to create a cool effect.

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 tech demo yet, stop for a minute and have a look. There is a wonderful nine-minute talk on the network 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 applied. 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 did not 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.

There are many different ways to ask CSS text underline... If we are talking about an ideal scenario, the underline must satisfy the following conditions:

• Positioned below the baseline of the line;
• Do not touch directly the parts of the letters that are below the baseline;
• It should be possible to change the color, thickness and style of the underline line;
• Underlining should continue after the text has been wrapped;
• Underlining should work on any background.

This is all pretty obvious. But as far as I know, there is no way to achieve all this with CSS.

Approaches

Ways with which you can underline text on the Internet:

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

Let's take a look at them one by one and talk about their pros and cons.

text-decoration

text-decoration is the simplest CSS underline method. Only one property applies and that's it. For small font sizes this may look pretty decent, but increase the size and the same line starts to look awkward.

View example

The biggest problem with using text-decoration is its lack of customization. The property matches any font size or text color to which it is applied, and there is no cross-browser way to change the given style.

PROS

• It's easy to apply;
• Located below the baseline;
• By default, it adds padding to the parts of the letters that protrude below the baseline ( in Safari and iOS);
• Wraps line by line;
• Suitable for any background;

MINUSES

• Does not add indentation from parts of letters that protrude below the baseline in other browsers;
• You cannot change the color, weight, or style of the underline line.

border-bottom

border-bottom is easy to use and customizable. This property makes it quite easy to change the color, weight, and underline style of CSS text.

The result of applying border-bottom to inline elements:

View example

Note that the underline is placed under the portions of the letters that extend below the baseline. This can be changed by setting the inline-block property on the element and decreasing the line-height value. But in this case, you lose the ability to wrap the text. Suitable for single line text.

View example

You can use the text-shadow property to hide the portion of the underline that extends below the baseline. In this case, it is necessary to use the background color. This approach only works with solid background colors, not gradient fills or images.

View example

To specify a single underline, you need to apply four style properties. This is more than text-decoration.

PROS

• With the help of text-shadow, you can set the indents from the parts of the letters protruding below the baseline;
• You can change the color, weight and CSS line style of the underline;
• You can set transitions and animations for the color and thickness of the underline;
• Carried over by default if not inline-block;

MINUSES

• Placed far from the text, this position is difficult to change;
• There are many additional properties to use;
• Strange text highlighting when using the text-shadow property.

box-shadow

This property forms an underline using two drop shadows: one creates a rectangle, the other hides most of it except for the bottom. This method is applicable only for a solid background.

View example

You can use the same trick as with text-shadow to simulate indentation from parts of the letters that protrude below the baseline. If the underline is supposed to be a different color from the text, then you won't have the same problems as with text-decoration.

PROS

• The CSS underline can be placed below the baseline;
• You can change the color and thickness of the underline;
• The underline is wrapped line by line.

MINUSES

• The style cannot be changed;
• Doesn't work for any background.

background-image

background-image produces a result that matches all of the above criteria. This uses linear-gradient and background-position to create an image that repeats horizontally along lines of text. In this case, the text must be set to display: inline ;.

View example

Instead of linear-gradient, you can add your own image with some effects.

View example

PROS

• The CSS link underline can be placed below the baseline;
• With the help of text-shadow you can set indents below the baseline;
• You can change the color, thickness and style of the underline;
• Works with custom images;
• Underline wraps line by line;
• Works on any background unless text-shadow is used.

MINUSES

• Image size can change in different ways depending on resolution, browser and viewing scale.

SVG Filters

You can create an SVG filter element that draws a line and then expands the text to hide the transparent parts of the line. After that, you need to set an identifier for the filter and refer to it in CSS:

filter: url ('# svg-underline').

The advantage of this approach is that the filter adds transparency without using text-shadow. You can set the CSS underline spacing to protrude below the baseline on any background. But this method is not applicable for one-line text, this is its main drawback.

View example

This is how it looks in Chrome and Firefox:

Browser support for IE, Edge, and Safari is problematic. Checking for SVG filter support in CSS is difficult.

PROS

• Can be placed below the baseline;
• You can set indents below the baseline;
• You can change the color, thickness and style of the underline line;
• Works on any background.

MINUSES

• Underscore does not wrap across multiple lines;
• Doesn't work in IE, Edge or Safari, but fallback can be done with text-decoration. It will look good in Safari anyway.

Underline.js (canvas)

Underline.js draws CSS underline using elements ... This is a new approach that works surprisingly well.

This is only a technical demo version, therefore, to use the library, you will have to make global changes in the project being developed.

We provide this method to demonstrate the possibilities when creating beautiful, interactive underlines.

Text-decoration- * properties

This property works fine on its own, but you can add a few experimental properties to tweak the look:

• text-decoration-color;
• text-decoration-skip;
• text-decoration-style.

Just don't rejoice ahead of time. Be aware of the browser support issue.

TEXT-DECORATION-COLOR

Allows you to change the CSS color of the dotted underline separately from the text color. This property is well supported by browsers. It works in Firefox and prefixed in Safari. But if you don't handle breaks below the baseline of the text, then Safari will place the underline on top of the text.

Firefox:

Safari:

TEXT-DECORATION-SKIP

This property adds breaks below the baseline:

It is not standard and currently only works in Safari, so you must use the -webkit prefix to use it. Safari supports this property by default, so breaks are added even on sites where the property is not specified at all.

TEXT-DECORATION-STYLE

This property offers the same types of CSS text underlining that can be set using border-style. And besides that adds the wavy line type.

The following are the different values ​​that you can use:

• dashed;
• dotted;
• double;
• solid;
• wavy.

For now, text-decoration-style only works in Firefox, here's a screenshot.

Description

Adds text decoration in the form of underlining, strikethrough, line above the text, and blinking. More than one style can be applied at the same time by listing values ​​separated by spaces.

Syntax

text-decoration: [blink || line-through || overline || underline] | none | inherit

The values

blink Sets blinking text. Such text periodically, about once a second, disappears, then reappears in the same place. This value is currently deprecated by browsers and is deprecated in CSS3; animation is recommended instead. line-through Creates strikethrough text (example). overline The line goes over the text (example). underline Sets underline text (example). none Cancels all effects, including the default underline for links. inherit The value is inherited from the parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

Strategic attack

Object Model

document.getElementById ("elementID") .style.textDecoration

document.getElementById ("elementID") .style.textDecorationBlink

document.getElementById ("elementID") .style.textDecorationLineThrough

document.getElementById ("elementID") .style.textDecorationNone

document.getElementById ("elementID") .style.textDecorationOverLine

document.getElementById ("elementID") .style.textDecorationUnderline

Browsers

Internet Explorer up to and including version 7.0 does not support the inherit value. The line obtained using the line-through value is higher in IE7 than in other browsers; IE8 has fixed this bug.

There are tons 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 under 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 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 underline and descenders. But if the color of the underline is different from the color of the text - or it is 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 lines of text.

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

The next option dispenses with the 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, that is, 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 determination of the capabilities of the browser, this is a noticeable shortcoming 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 were never 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 with 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 basically 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.