> >

Wavy line css. Underlining in CSS

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

There are many ways to style underlines. You may remember the article “Creating Medium Link Underlines”. Medium didn't try to do anything out of the box, they just wanted to create attractive underlines in the text.

Thin, black underlines with spaces around letters with footers - by Marcine Witchery from Create Link Underlines on Medium.

A nice standard underline that also has good size and skips descenders of letters. Much better than most default browsers. As it turns out, Medium ran into a lot of problems along the way. And even two years later, good underline styling still causes a lot of problems.

Goals

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

be below the baseline;

skip the lower protruding parts of the letters;

change color, thickness and styles;

move to a new line;

work with any background.

I think it's entirely possible for us to require all of this from underlining, but as far as I know, there's no intuitive way to accomplish all of these things in CSS.

Approaches

So what are the ways we have to underline text? I remembered the following:

text-decoration;

background-image;

SVG filters;

Underline.js (canvas);

text-decoration-*

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

text-decoration property

The text-decoration property is the easiest 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 it applies to, and there is no cross-browser way to change styles. A little later we will talk in more detail about this property.

pros

easy to use;

located below the baseline;

skips descenders of letters by default in Safari and iOS;

jumps to a new line;

works with any background.

Minuses

does not skip trailing lower parts of letters in other browsers;

you can not change the color, thickness and styles.

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, thickness and styles. This is what the border-bottom property looks like on inline elements:

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

You can also use text-shadow to hide parts of the line around the bottom callouts. In such a case, you will have to mimic the background color, which means that the method only works on uniform backgrounds. Gradients and images won't work.

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

pros

can be used transition property and animate 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 extra properties need to be used to make the underline look good;

poor text selection when using text-shadow.

box-shadow property

The box-shadow property draws an underline using two inner shadows: one creates a box, 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 a gap around the letterheads. If the color of the line is different from the text, or it's thin enough, then there shouldn't be any problems, as is the case with text-decoration.

pros

can be placed under the baseline;

callouts can be skipped with text-shadow;

you can change the color and thickness;

jumps to new lines.

Minuses

you can't change styles;

does not work with all backgrounds.

background-image property

The background-image property is the best for our purposes and has very few downsides. The idea is that you create an image with linear-gradient and background-position that repeats along the 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 placed below the baseline;

you can skip footers with 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 you don't use text-shadow.

Minuses

Image size may change differently for different resolutions, browsers and zoom levels.

SVG filters

This is the method I played with. You can create an inline svg element filter, which will draw the line, and expand the text to mask out the parts of the line that should be transparent. A filter can be given an id and referenced in CSS with filter: url('#svg-underline').

The advantage here is that the filter adds transparency without relying on text-shadow. That is, you can skip footer letters on any background, including gradients and images! The example below only works on one line of text, so be careful.

And this is how it looks in Chrome and Firefox:

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

pros

located below the baseline;

skips bottom callouts;

you can change the 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. Underscores in Safari look great on their own.

Underline.js (Canvas)

Underline.js is an amazing library. I'm impressed with what Wenting Zhang could do with JS and attention to detail. If you haven't seen the Underline.js tech demo yet, stop for a moment and take a look. There is a wonderful nine-minute speech on the network on the topic of working principles, I will now quickly retell it to you. Underlines are drawn with 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 worth mentioning only as a proof of concept. Canvas has the potential to create beautiful, interactive underlines, but you'll have to write additional JS code to get it to work properly.

text-decoration-* properties

Remember, I said that a little later we will analyze something in more detail? Now let's do this. The text-decoration property works well on its own, but we can add a couple of experimental properties to further best view:

text-decoration-color

text-decoration-skip

text-decoration-style

Don't get too excited, you know about browser support.

text-decoration-color property

The text-decoration-color property allows you to change the underline color separately from the text color. The property even has good browser support. It works in Firefox and prefixed in Safari. There is a downside - if you do not clear the line around the callouts, in Safari it lies on top of the text. Firefox:

text-decoration-skip property

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

The 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 enabled by default, which is why underlines skip footers even on sites where this property is not specified.

If you are using Normalize you need to know that latest versions disable the property for normal operation in all browsers. If you want to return those almost magical underlines, you need to enable this property.

text-decoration-style property

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

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

A set of solid underlines Look similar?

What's wrong?

The text-decoration-* properties are more intuitive than other underline styling properties. However, if we take a different look at the requirements that we presented earlier, we can see that these properties 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 early CSS due to lack of interest in them. They never applied. Hey, it's not 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. In most browsers, it looks so-so, but it's always been that way, and people didn't pay attention to it. If you're patient enough, chances are that soon all your underlines will look good and you won't have to change anything.

For body text, use background-image. The method works, looks nice, and has Sass mixins for it. If the underline is thin, or the color is different from the text, you can probably skip the text-shadow method. For text on a single line, use border-bottom and any other properties.

And to skip lettering callouts on gradient backgrounds or images, try using SVG filters. Or just don't mix such backgrounds with underlines. In the future, as browser support improves, it will be possible to use the text-decoration-* properties.

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

  • Be located below the base line 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;
  • Underlining should continue after text wrapping;
  • The underline should work on any background.

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

Approaches

Ways to underline text online:

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

Let's go through them one by one and talk about their pros and cons.

text-decoration

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

View example

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

PROS

  • It is simple to apply;
  • Located below the baseline;
  • By default, it adds padding from parts of letters that extend below the baseline ( in Safari and iOS);
  • Wraps over lines;
  • Suitable for any background;

MINUSES

  • Does not add padding from portions of letters that extend 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 makes it quite easy to change the color, thickness, and line style of the CSS text underline.

The result of applying border-bottom to inline elements:

View example

Note that the underline is placed under the parts 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 part of the underline that extends below the baseline. In this case, the background color must be used. This approach only works with solid background colors, not gradient fills or images.

View example

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

PROS

  • With text-shadow, you can set indents from parts of letters that protrude 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 if it's not inline-block ;

MINUSES

  • Placed far from the text, this position is difficult to change;
  • Many additional properties need to be used;
  • Weird text highlighting when using the text-shadow property.

box shadow

This property forms an underline using two shadows: one creates a rectangle, the second 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 padding from parts of the letters that stick out below the baseline. If the underline should be a different color than the text, then you won't have the same problems as with text-decoration .

PROS

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

MINUSES

  • Can't change style;
  • 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. 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

  • underlining CSS links can be placed below the baseline;
  • With text-shadow, you can set the padding below the baseline;
  • You can change the color, thickness, and style of the underline;
  • Works with custom images;
  • Underlining wraps line by line;
  • Works on any background as long as no text-shadow is 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 ID 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 appear below the baseline 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. Checking for SVG filter support in CSS is difficult.

PROS

  • May 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 wrap across multiple lines;
  • Doesn't work in IE , Edge , or Safari , but you can fallback with text-decoration . In Safari it will look good anyway.

Underline.js (canvas)

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

This is only a technical demo, so to use the library, you will have to make global changes in the project under development.

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

text-decoration-* properties

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

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

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

TEXT-DECORATION-COLOR

Lets change css color dotted underlines separate from text color. This property well supported by browsers. It works in Firefox and with the prefix in Safari . But if you don't handle breaks below the baseline of the text, then Safari will place an 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 need to use the -webkit prefix to apply 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 with border-style . And besides that, it adds a line type wavy (wavy).

The following are the various values ​​that can be used:

  • dashed ;
  • dotted ;
  • double ;
  • solid ;
  • wave.

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 css make beautiful dividing line in the form of a wave on the site. It can be used, for example, to visually separate posts on a blog, or separate blocks in a sidebar.

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

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

For starters, 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 kinds of lines. And this is how the 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 have used linear-gradient and radial-gradient features from css3 arsenal.
There is another use case dividing line in the form of a wave (the lowest in the illustration at the beginning of the post). It can be used at the end of any block, as a bottom decoration. The code is quite simple. First html:

AT css rules apply the :before and :after pseudo-elements. You can read about them. Here's 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! Dare!

The CSS text-decoration property is responsible for decorating the text in terms of underlining. You can make an underscore, an overscore. You can also strike through text or apply all underlines at once.

CSS syntax text-decoration

...text-decoration : none|underline|overline|line-through|inherit; ...
  • none - text without decoration
  • underline - underscore
  • overline - top underline
  • line-through - text strikethrough
  • blink - blinking text (recommended not to use this value)

You can specify multiple values. For example

text-decoration : underline overline ;

How to change the underline style and color

To change the style of the underline, there is a special property text-decoration-style :

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 html colors codes and names for the site)

Note

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

Examples with underscores

Example 1: A simple underline

Обычный текст. Нижнее подчеркивание Верхнее подчеркивание

Обычный текст.

Нижнее подчеркивание

Верхнее подчеркивание

Верхнее и нижнее подчеркивание

Пример 2. Зачеркнутый текст

Обычный текст. Зачеркнутый текст

Вот как это выглядит на странице:

Обычный текст. Зачеркнутый текст

Пример 3. Меняем цвет и тип подчеркивания

Обычный текст.

Вот как это выглядит на странице:

Обычный текст.
Красное подчеркивание с пунктирной линией

Примечание

Если вы не видите каких-то изменений в последнем примере, то можно попробовать использовать проверенный способ с помощью свойства border-bottom :

border-bottom : 1px datted red ;

Для обращения к text-decoration из JavaScript нужно писать следующую конструкцию:

object.style.textDecoration ="VALUE "

Подчёркивание бывает разного вида, соответственно, различаются методы его создания. Ниже перечислены несколько популярных.

Использование text-decoration

Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color . В примере 1 показано применение text-decoration к элементу

.

Пример 1. Использование text-decoration

Подчёркивание

Result this example shown in fig. one.

Rice. 1. View of the 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 the given thickness, color and style to the element below. Such a line takes up the entire available width, regardless of the length of the title 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

Underline

Cultural speech act in the 21st century

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

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

Usage::after and content

It is also possible to 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 already determined by other properties. On fig. 3 shows such a line.

Rice. 3. Line created with::after

The position of such a line relative to the text is set through the property bottom with 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

Underline

Cultural speech act in the 21st century

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

Internet
The most interesting:
How to connect the printer via LAN
Instagram self-promotion tools
How to make money on Glopart