Underlining styles on the Internet. Ways to underline in CSS Additional tricks for underlining links

There are many different ways to set underlining CSS text . If we are talking about an ideal scenario, the underscore should satisfy the following conditions:

  • Located below the baseline of the line;
  • Do not come into direct contact with parts of the letters protruding below the baseline;
  • It should be possible to change the color, thickness and style of the underline;
  • The underlining should continue after the text wraps;
  • 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 using CSS.

Approaches

Ways to underline text on the Internet:

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

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

text-decoration

text-decoration is the simplest way to use CSS underlining. Just one property is applied and that's it. For small font sizes this can 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 the lack of customizability. The property matches whatever font size or text color it is applied to, and there is no cross-browser way to change the given style.

PROS

  • It is easy to use;
  • Located below the baseline;
  • By default, it adds padding from parts of letters protruding below the baseline ( in Safari and iOS);
  • Wraps across lines;
  • Suitable for any background;

MINUSES

  • Does not add padding to portions of letters extending below the baseline in other browsers;
  • You cannot change the color, thickness, or style of the underline.

border-bottom

border-bottom is easy to use and customizable. The property allows you to change the color, thickness, and style of CSS text underline quite easily.

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 element's inline-block property and decreasing the line-height value. But in this case you lose the ability to wrap 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, you must use the background color. This approach only works with solid background colors, not with gradient fill or images.

View example

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

PROS

  • Using text-shadow you can set indents from parts of letters protruding below the baseline;
  • You can change the color, thickness, and style of the CSS underline line;
  • You can set transitions and animations for the color and thickness of the underline;
  • Wraps by default unless it's inline-block ;

MINUSES

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

box-shadow

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

View example

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

PROS

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

MINUSES

  • It is not possible to change the style;
  • Doesn't work for any background.

background-image

background-image gives a result that meets 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

  • Underline CSS links can be placed below the baseline;
  • With text-shadow you can set padding below the baseline;
  • You can change the color, thickness and style of the underline;
  • Works with custom images;
  • The underlining is carried line by line;
  • Works on any background as long as text-shadow is not used.

MINUSES

  • Image size may vary 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 reference 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 line spacing to extend below the base line on any background. But this method is not applicable for single-line text, this is its main drawback.

View example

Here's what it looks like in Chrome and Firefox:

Browser support for IE, Edge, and Safari is problematic. Testing 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;
  • Works on any background.

MINUSES

  • Underlining does not carry over multiple lines;
  • Doesn't work in IE, Edge or Safari, but you can create a fallback using 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, so to use the library you will have to make global changes to the project being developed.

We bring this method to demonstrate capabilities when creating beautiful, interactive highlights.

Properties text-decoration-*

This property works great on its own, but you can add a few experimental properties to customize the appearance:

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

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

TEXT-DECORATION-COLOR

Allows you to change the CSS color of the dashed underline separately from the text color. This property well supported by browsers. It works in Firefox and using a prefix in Safari. But if you don't handle breaks below the text baseline, 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 this moment only works in Safari, so you need to 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 CSS text underline types that can be set using border-style . And besides this, it adds a line type wavy (wavy).

Below are the different values ​​that can be used:

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

At the moment text-decoration-style only works in Firefox, here's a screenshot.

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

Once upon a time I already talked about. But it used the hr dinosaur tag with a couple of tricky style rules that allowed you to play with the shadow.

Today the situation is completely different. To display a line as a wave, you will have to add much more tricks to the rules and use not just css, but css3. Welcome!

To begin with, the usual html code. We will display the lines as empty div blocks 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 what a set of css styles 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 such features as linear-gradient and radial-gradient from the css3 arsenal.
There is another use case 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 design. The code is quite simple. First html:

IN css rules Let's use the pseudo-elements:before and:after . 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!

Description

Adds text decoration in the form of underlining, striking through, a line above the text and blinking. You can apply more than one style at a time by listing values ​​separated by spaces.

Syntax

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

Values

blink Sets the text to blink. Such text periodically disappears, approximately once a second, then reappears in its original place. This value is currently not supported by browsers and is deprecated in CSS3, with animation recommended instead. line-through Creates line-through text (example). overline A line passes over the text (example). underline Sets the text to be underlined (example). none Cancels all effects, including underlining links, which is set by default. inherit The value is inherited from the parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

text-decoration

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 versions up to and including 7.0 do not support the inherit value. The line obtained using the line-through value in IE7 is positioned higher than in other browsers; This bug has been fixed in IE8.

There are different types of underlining, and accordingly, the methods for creating it differ. Listed below are a few popular ones.

Using text-decoration

The text-decoration property with the value underline adds an underline to the text; This kind of underlining can be observed 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 title itself. You can change the line color through the text-decoration-color property. Example 1 shows applying text-decoration to an element

.

Example 1: Using text-decoration

Underscore

Result this example shown in Fig. 1.

Rice. 1. View of a line created via 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 thickness, color, and style to the element below. Such a line occupies the entire available width, despite the length of the title text (Fig. 2).

Rice. 2. View of a 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

Underscore

Cultural speech act in the 21st century

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

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

Using::after and content

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

Rice. 3. Line created via::after

The position of such a line relative to the text is specified through the property bottom with a negative value, line color via 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

Underscore

Cultural speech act in the 21st century

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