All text enclosed in tags and becomes emphasized.

Name came from the English word "underline". html tag considered newer.

for instance

Plain text.

Plain text. Underlined text via ins tag

Converted on the page to

Plain text. Underlined text via u tag

Plain text.

Underlined text via the CSS text-decoration property

CSS has the text-decoration property, which is responsible for formatting the html text to create an underline.

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)

We are interested in the value of underline

For instance:

Текст со свойством text-decoration: underline

Преобразуется на странице в

Текст со свойством text-decoration: underline

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom создано для создании рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивание тексту.

Рассмотрим пример

Преобразуется на странице в

Подчеркивание для блочных элементов вроде тега

можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.

Линия под текстом на всю ширину блока

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom , его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

HTML5 CSS 2.1 IE Cr Op Sa Fx

Sample text

The distance from the line to the text can be adjusted with the padding-bottom property by adding it to the H1 selector. The result of this example is shown in Fig. one.

Text underlining

To underline only the text, you need to use the text-decoration property with a value of underline , again adding it to the H1 selector (example 2).

Example 2: Line to Text Width

HTML5 CSS 2.1 IE Cr Op Sa Fx

Sample text

The black headline grabs attention despite being black instead of white.

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

In the case of using the text-decoration property, the line is hardwired to the text, so its position and style cannot be determined.

Greetings to all who are hungry for new knowledge and read my blog. I want to devote today's publication to a very easy topic, which nevertheless regularly raises a number of questions from beginners: "How to remove or add an underscore in html."

As you already know, the underscore itself can be set manually, but links have them set by default. That is why in this article I will remind you how to underline headings, tell you how to set the bottom line to the entire width of the block, and also how to deal with standard link formatting. Well, let's start!

Let's highlight this!

There is a special pair tag for underlining text: word.

However, professional layout designers use the mechanisms of style cascading tables, i.e. css to style the look of the entire . And it is right. This approach separates markup from styling, making formatting flexible and convenient. In addition, it is easier to catch bugs (errors) in the code.

The following properties are mainly used to underline text content: border and text-decoration.

Element border is responsible for setting a frame around the specified block, and also allows you to set the line thickness and style.

This language unit is quite flexible, as you can specify formatting for individual sides of the border. This is achieved using properties:

1. border-right(on right)
2. border-top(above)
3. border-left(left)
4. border-bottom(bottom)

• point ( dotted)
• dashed ( dashed)
• linear ( solid)
• double ( double)
• volumetric framing blocks ( groove,inset,ridge andoutset)

Do not forget that you can always repeat the style settings of the parent block using the keyword inherit.

Now let's discuss the css language property text-decoration. This element is responsible for additional decoration of the text.

These include:

1. flashing ( blink)
2. line above text ( overline)
3. strikethrough objects ( line through)
4. styling inheritance ( inherit)
5. cancel all additional decorations ( none)
6. the underlining we need ( underline)

It's time for practice

Now I want you to consolidate the acquired knowledge and practically try out the example code I have given. For those who are familiar with this topic, it will also be useful. As we all know: "Repetition is the mother of learning!".

This code implements a modified styling of links, and also sets the title underline to the full width of the block.

Title the text with an underlined title

On this note, I end the tutorial post. It covers all the necessary tools for underlining text content, knowing which you can create your own design options for website pages.

Do not forget to join the ranks of my subscribers, because there are still many interesting and useful topics ahead, and also share the blog link with your friends. Bye Bye!

Sincerely, Roman Chueshov

There are many different ways to style underlining. You may remember Marsin Vichari's article “Crafting link underlines” on Medium. Medium developers are not trying to do something crazy, they just want to create a nice line under the text.

This is the simplest underline, but it's the right size and doesn't overlap the letterheads. And it is definitely better than the default underline in most browsers. Medium has struggled to achieve its style on the web. Two years later, we still find it difficult to make a beautiful underline.

Goals

What's wrong with the usual text-decoration: underline ? In the ideal scenario, underscore should do the following:

• be positioned below the baseline;
• skip callouts;
• change the color, thickness and style of the line;
• work with multiline text;
• work on any background.

I think 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 we can implement underlining on the web?

Here are the ones I'm considering:

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

Let's take a look at these methods one by one and talk about the pros and cons of each.

text-decoration

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

The biggest problem with text-decoration is the lack of settings. You are limited by the color and font size of the text and there is no cross-browser way to change it. We'll talk more about this later.

• 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 you to change the color, thickness, or style of the line.

border-bottom

border-bottom strikes a good balance between simplicity and customizability. This approach uses the good old CSS property for the border, which means you can easily change the color, thickness, and style.

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

The main disadvantage is the distance of the underline from the text, it is entirely below the callouts. You can fix this by setting the elements to inline-block and lowering the line-height , but then you lose the ability to wrap text. Good for single lines, but not good anywhere else.

Additionally, we can use text-shadow to overlay part of the line next to descenders, simulating this with the same color as the background. That is, this technique only works on a plain, one-color background, with no gradients, patterns, or images.

At the moment, we are already using as many as four properties to design one line. It's a lot more work than just adding text-decoration .

• can skip callouts with 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 complicated way;
• many additional properties are used for proper operation;
• when using text-shadow, text selection looks ugly.

box shadow

box-shadow draws a subline with two inner shadows: one creates a rectangle, and the second hides part of it. This means you need a solid 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's just thin enough - the line won't collide with the callouts the way it would with text-decoration .

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

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

background image

The background-image method is closest to what we want and has the fewest drawbacks. The idea is to use linear-gradient and background-position to create an image that repeats under lines of text.

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

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

• can be positioned below the baseline;
• can skip callouts with text-shadow ;
• works with custom images;
• wraps multiple lines of text;
• works on any background as long as no text-shadow is applied.

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

SVG Filters

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

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

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

Support in IE, Edge and Safari is problematic. It's hard to test SVG filter support in CSS. You can use the @supports directive with filter , but this only checks that the link to the filter works, not the filter itself. My attempts ended with a dreary definition of browser capabilities, this is a tangible drawback of the method.

• can be positioned below the baseline;
• can skip callouts;
• 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 amazing. I find it impressive what Venting Zhang has done with her JavaScript skills and attention to detail. If you haven't seen the Underline.js tech demo, stop reading and give it a minute. 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 tech demo. This means that you can't just take it and plug it into your project without changing the code.

I decided to mention it as a proof of concept that has the potential to create beautiful interactive underlines, but you have to write your own JavaScript to make it work.

New text-decoration properties

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

By itself, this property works great, but you can add a few experimental properties to customize the appearance of the underline.

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

But don't get too excited... Browser support as always. So it goes.

text-decoration-color

The text-decoration-color property allows you to change the underline color separately from the text color. 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 put an underline on top of the text.

text-decoration-skip

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

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

If you're using Normalize, be aware that recent versions disable this property for the sake of consistent browser behavior. And if you want the underline to not affect callouts, you need to manually activate it.

text-decoration-style

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

Here is a list of available values:

• dashed
• dotted
• double
• solid

Right now the text-decoration-style property only works in Firefox, here's a screenshot of it:

What is missing

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

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 an optimistic addition of text-decoration-skip . It looks a bit gaudy in most browsers, but underlining has always been around in browsers and people just won't notice. Plus there's always a chance that if you're patient, that underline will someday look good without you having to change anything, as browsers do.

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

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

And if you want callouts to skip over a gradient or image background, 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 taking a look at Benjamin Woodroffe's article CSS Underlines Suck, which deals with the same issues.