How to make underline in css. Beautiful css underlining of elements

On this page you will find examples on how to change HTML links using CSS, which allows you to make them block links, icon links, without underlines, with rounded corners, change the distance between them and much more. In the future, based on these examples, you can create various options navigation menus for site.

Before you start studying the examples, I want to make a small clarification. In all examples, for greater clarity, a CSS pseudo-class will be used, which is used to change the styles of links when the mouse cursor hovers over them. It must be said that this practice is common and is used to one degree or another on almost all Internet sites.

In this example, we will remove the underline from the links, and then add or remove them on mouseover.

HTML and CSS example: how to remove and add underlines from links

Description of the example

1. Default is all popular browsers add underlining to links, which is controlled by the CSS property. That is, by default this property, for links, has the value underline . Using this knowledge, we change the underlining of links in their different states.

Initially, the underlining of links is a solid thin line, pressed almost closely to the text. And in most cases, this option is quite sufficient. However, sometimes a design requires that links be underlined with a dotted line rather than a solid line, or that the distance from the underline to the links be greater than the standard, or that the underline itself be bolder. And sometimes you need to make some kind of exotic underlining, for example, with a wavy or multi-colored line. All these options will be discussed in this example.

HTML and CSS Example: Dotted Link Underline

Description of the example

1. First, we remove the standard underline from all links, since we will use non-standard methods. Then we add a bottom border to the first link using the CSS property and make it dashed. This will be our underscore. To remove the underline when you hover over a link, we use a pseudo-class and make the background of the frame the same as the background of the page, that is, we simply hide it. In theory, it would be better to make the background of the frame transparent, but IE6 misunderstands this meaning.
2. With the second link we do the same as with the first, but we just draw a solid line. To increase the distance from the text to the underline, we give the link a small bottom margin using the CSS property.
3. Our third link has a multi-colored underline, so we will add it using background image. For this we use a small image, which we connect via CSS. Position the background at the bottom of the link (0 100%) and allow it to be duplicated only horizontally (repeat-x). The underline is ready, but it is too close to the text; to fix this, we add a small indent to the link below. That's it.
4. In the old IE6 and IE7, there may be problems with displaying the underscore on the first and second links. To fix this, add the zoom :1 property, which includes the so-called layout. This property is invalid and only these browsers understand it, so it is better to enable it conditional comments.

Very often, to create a menu, you need to make not just text links, but block links, in which the active area will be both the text itself and a certain area around it.

Description of the example

1. To create block links we use CSS property:block, which turns them into block elements that create a line break before and after them. If line breaks are not needed, you can replace the value with inline-block .
2. Since our links are now blocks, if necessary, we can change their width (CSS) or height (CSS).
3. In this example, we do not specify the height of the links at all, but simply give them internal padding (CSS), which expands the blocks.

Description of the example

1. Everything is very simple - using the CSS property we add the desired frame to the links under the cursor. However, please note that we add exactly the same frame to regular links, but we make it the same color as the page background. That is, we simply hide the frame for the time being. This is done so that when you hover the mouse cursor, the links do not start to “jump” due to the drawing of the frame.

Instead of making the border color match the background of the page, it could be set to transparent and made transparent, but as I said, IE6 does not handle it correctly.

HTML and CSS Example: Creating 3D Links

Description of the example

1. Using the CSS property we add frames to the links, and with the help we set their color. In this case, for the left and upper borders we indicate light shade colors, and for the bottom and right - dark. It is thanks to this distribution of colors that we get links that look like three-dimensional buttons.
2. To make it seem like the buttons are being pressed when you hover the mouse cursor, we invert the border colors of links with a pseudo-class. For an additional click effect, set the relative positioning (CSS :relative) and make a one-pixel upward offset (CSS :-1px).
3. Well, to make everything absolutely beautiful, we set the text and background color of the links under the cursor a little darker than the usual ones. Ready.

In this example, we will make links with icons that will contain not only images of these icons, but also text under them. However, in the future you can easily change them and leave, for example, only icons.

Before starting work, we will prepare several images of icons, in two sets - for regular links and links under the mouse cursor. The second set should be externally different from the first, with us this is expressed in the color palette.

Description of the example

1. To shorten the code, we use two classes in links - “links” (with common properties) and “image”, “audio”, “video” (personal for each link). This point is described in detail in classes CSS reference.
2. Our icons are 50x50 pixels in size and will be present on the links as a background (CSS), which we will center at the top (50% 0) and prevent it from replicating (no-repeat).
3. We add padding (CSS) to the links so that the text in the links does not adhere to the edges. At the same time, we make the top indent equal to the height of the icons so that the text does not overlap with them, because our icons are the background.
4. If there is very little text in the links, then the icon images will be cut off on the sides. To prevent this from happening, we set the links to a minimum width (CSS) so that it is at least equal to the width of the icons. In our case, we need to get a minimum width of 50px, but we set it to 40px, since another 10px will be added due to the side padding.
5. To make the minimum width work, we convert the links into inline blocks (CSS: inline-block).

IE6 will have to “cure” a little:

1. IE6 doesn't understand the minimum width property, but it does interpret the CSS property as a minimum width. Therefore, we use a simple one for it hack which will fix this problem.

In this example, we will round the corners of the links using one of the methods rounding corners, described in the next subsection. We will not consider the option using CSS 3, since everything is very simple there, but it would be better to make roundings using images.

To do this, first we will cut out several blank images in two sets - for regular links and links under the cursor. For us, it will differ in the presence/absence of shadows in the images.

absolute positioning*/ top: 0; /* zero top offset */ ) .links:before ( content: url("images/left_bok.png"); /* left side image */ left: 0; /* zero left offset */ ) .links:hover: before ( content: url("images/left_bok_hover.png"); /* image of the left side under the mouse cursor */ ) .links:after ( content: url("images/right_bok.png"); /* image of the right side * / right: 0; /* zero offset to the right */ ) .links:hover:after ( content: url("images/right_bok_hover.png"); /* image of the right side under the mouse cursor */ )

Description of the example

We will not dwell on the rounding technology itself; if necessary, you can read about it in the corresponding section of the site.

1. Using the CSS property :inline-block we make links inline blocks. In particular, this is necessary so that we can give links an exact height that matches the height of the images.
2. Remove the underline and center the text (CSS:center). In general, in our case it is not necessary to center the text, since the links adjust to the size of the text in them and there is simply nowhere for it to be aligned. But if you need to increase the width of the links (for example, up to 150px), then this alignment will come in handy.
3. in order to change appearance links, when they are under the mouse cursor - add additional selectors to the styles with a CSS pseudo-class, in which we indicate our parts of the images, but without a shadow.

For IE6 and IE7 we connect additional styles using conditional comments, but we change the CSS code itself a little and make it different from the one used in ways to round corners:

1. The essence of the change is that with the help of expression we integrate the same two tags inside the links, but only without the attributes containing styles. Instead, we add the classes “left_bok” and “right_bok” to the tags, and add styles for them and write them below. These styles are almost exactly the same as in the main CSS code, but here all the images are used as the background of the tags.

Rounded corners of links (option two)

Let's look at another example of rounding the corners of links, but using four separate corner images.

Description of the example

Here, too, we will not talk about the rounding itself, we will only outline the distinctive points.

1. Using the CSS property :inline-blok, we convert links into inline blocks. Then we remove the underline from them, add a frame and align the text to the center.
2. Since the pseudo-elements with which we round the corners are located inside links, their content is also centered, and, therefore, the picture corners added by the CSS property are not placed in the corners as we need. To fix this, we add :left to it, returning the value that browsers use by default.

You've probably noticed the animated underlining of links on many resources and wanted to know how to implement it on your website. To make something beautiful css underline elements we do not need great knowledge, or the connection of additional scripts, all we need is standard HTML and CSS.

Variations of underlining

Underlining links or any other elements, you can come up with anything you want. The underline can float up from the bottom, move out to the left or right, etc. We'll look at a more interesting example, in which the underline will spread out from the center to the edges, as in the demo below.

underscore demonstration

HTML

First, let's create some element, for example, take the A tag. Its attribute is not important to us, because most of the work will be devoted to styles.

CSS

The implementation will consist of two lines that will extend from the middle of the bottom of the element to its edges.

The text-decoration property is responsible for underlining, but it doesn’t make sense to use it here, because implementing our animation plans in this case is not entirely relevant. Let's not forget that each element can be assigned a pseudo-element::before or::after . Therefore, we will set all the properties to them, and immediately set the following parameters to our link:

A( display: inline-block; position: relative; text-decoration: none; )

Thus, we set block streamlining and positioning relative to the original location. All this is done so that the underline does not extend beyond the element when we assign absolute positioning to the ::before pseudo-element. After this, we need to set its clear location and size. And here we immediately create the first half of the underscore.

A::before( display: block; position: absolute; content: ""; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out, left .5s ease-in- out; left: 50%; bottom: 0; )

Those. The height of the underline will be 2px, length 0, red, and the transition property is responsible for the animation. And of course, the left indentation is 50%, i.e. center point. We perform almost the same actions with the ::after pseudo-element:

A::after( display: block; position: absolute; content: ""; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out; left: 50%; bottom: 0; )

A:hover::before( width: 50%; left: 0; ) a:hover::after( width: 50%; )

It is worth noting that this is just one way to implement this idea. You can do the same thing using just one pseudo-element::before . Subscribe to materials and suggest topics for articles.

By default, browsers use certain sets CSS styles to specific HTML elements. For hyperlinks, these default styles specify that any link text appears in blue with CSS underline . This is done so that site visitors can easily determine that this text is a link. Many web designers don't pay attention to these default styles, especially underline. Luckily, CSS makes it easy to change the appearance of hyperlinks.

Remove link underlining

Underlined text may be more difficult to read than normal text. Many designers simply don't pay enough attention to this. But you can remove the underline completely. For this we will use the CSS text-decoration property. Here's the CSS code you can use to do this:

a (text-decoration: none; )

With this line of code you can remove the CSS underline style of all links.

Caveat about removing underscores

Whether you like underlining or not, there is no denying that it allows you to indicate the connection of text with a link. If you remove the underline or change the blue color of the links, you need to provide instead styles that allow the text of the links to stand out. This will make the interaction of visitors with the site intuitive.

Don't underline text that isn't linked to the link

Do not underline text that is not a link. People are used to the fact that underlined text ( With using CSS underline color) is a link. If you underline content to focus attention on it ( instead of putting it in bold or italics), you are misleading site users.

Change the solid underline to dots or dashes

If you want to keep the underlining of links, but change the default style (line " solid «), this can be done as follows. Use dots instead of a solid line. To do this, you need to remove the underline and replace it with the border-bottom property:

a ( text-decoration: none; border-bottom:1px dotted; )

Since we removed the standard CSS text decoration underline, only a line of dots will be displayed:

The same can be done to get a dotted underline. Just change border-bottom to dashed :

a ( text-decoration: none; border-bottom:1px dashed; )

Change the underline color

Another way to draw users' attention to links is to change the underline color. Don't forget that color text underline The CSS must match the color scheme being used:

a ( text-decoration: none; border-bottom:1px solid red; )

Double underscore

The trick to creating a double underline is to change the border width. If you create a 1 pixel wide border, the result will be two underlines that look like one:

a ( text-decoration: none; border-bottom:3px double; )

You can also use the default underscore to create an alternative double underscore. For example, to make one of the lines double:

a ( border-bottom:1px double; )

Don't forget about different link states

You can also use border-bottom to various conditions links. Using the :hover pseudo-class will help improve the user experience. To create a second dotted underline that appears when you hover over a link, use the following code and disable the CSS text decoration underline :

a ( text-decoration: none; ) a:hover ( border-bottom:1px dotted; )

Translation of the article " How to Change Link Underlines on a Webpage"was prepared by the friendly project team.

Good bad

From the author: Styling link underlines is quite tricky, and I keep forgetting which method is best in which situation. Fortunately, John Jameson will help us quickly understand this in his article.

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

Thin, black underlines with spaces around letters with bottom callouts – work by Marcine Witchery from the article Creating Link Underlines on Medium.

A good standard underscore, which also has good size and skips lower letters. Much better than most browsers default. As it turns out, Medium faced a lot of challenges 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 an ideal scenario, the underscores should:

be located below the baseline;

skip lower letters;

change color, thickness and styles;

go to new line;

work with any background.

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

Approaches

So what methods do we have at our disposal to underline 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.

text-decoration property

text-decoration property- the easiest way to underline text. You only need to apply one property. On small text, such a line will look fine, but if you increase the font size, it will look awkward.

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

pros

easy to use;

located below the baseline;

skips descenders by default in Safari and iOS;

jumps to a new line;

works with any background.

Minuses

does not skip descenders of letters in other browsers;

Color, thickness and styles cannot be changed.

border-bottom property

The border-bottom property is a good balance of speed and customization. This approach uses proven CSS frames, which means you can easily change colors, thicknesses 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 descenders of the letters. This problem can be solved if you make the element inline-block and reduce the line-height, but then you lose the ability to jump to new lines. Good for single lines, but no more.

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

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

pros

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

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

Minuses

the line is located very far away and is difficult to move;

too many unnecessary properties need to be used to make the underline look good;

Poor text highlighting when using text-shadow.

box-shadow property

The box-shadow property draws an underline using two inner shadows: one creates a rectangle, and the second hides it. This means that for proper operation method requires a uniform background.

The same text-shadow trick can be used to simulate skipping around the bottom callouts of letters. If the line color 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 placed 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;

Doesn't work with all backgrounds.

background-image property

The background-image property solves our problems best of all, and it has very few disadvantages. The idea is that you create an image using 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 callouts 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 you don't use text-shadow.

Minuses

Image size may vary depending on different resolutions, browsers and zoom levels.

SVG filters

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

What's great about this is that the filter adds transparency without relying on text-shadow. This means you can skip letter balloons 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:

There are support issues in IE, Edge and Safari. It's difficult to test support for SVG filters in CSS. You can use the @supports rule on filter, but this will only check whether the link itself works, and not whether the filter is applied or not. My method is quite rough on 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. Underlines in Safari look great on their own.

Underline.js (Canvas)

Underline.js is an amazing library. I'm impressed with what Wenting Zhang were 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 take a look. There is a wonderful nine-minute speech online on the principles of work, I’ll quickly retell it to you now. Underlines are drawn with using canvas. A completely new approach that works surprisingly well.

Despite the attractive name, this is just a technical demo. That is, you will not be able to immediately put the library into the project without a whole bunch changes.

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

Properties text-decoration-*

Remember when I said we'd go into more detail on something a little later? Now let's do this. The text-decoration property works well on its own, but we can add a couple of experimental properties for added value. best view:

text-decoration-color

text-decoration-skip

text-decoration-style

Don’t rejoice ahead of time, 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 don't clear the line around the callouts, in Safari it will lie on top of the text. Firefox:

text-decoration-skip property

The text-decoration-skip property is responsible for skipping footer balloons 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. In Safari, this property is enabled by default, which is why underscores 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 those almost magical underscores back, 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– wavy. Possible values:

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

Set of monochromatic underlines Look similar?

What's wrong?

The text-decoration-* properties are more intuitive than other properties for styling underlines. However, if you take a different look 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 thrown out early version CSS due to lack of interest in them. They were never used. 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 has always been like this, and people did not pay attention to it. If you're patient enough, chances are that soon all your underlines will look good without you having to change a thing.

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

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

With the advent of CSS3, HTML5 and the inclusion of web fonts, sites have become dynamic, beautiful and more technologically advanced in the development process. Many people do not like to underline links and to some extent I understand them. Quite thick lines, though, help the user navigate the site and distinguish a link from regular text. But they make it somewhat difficult to read.

With the advent of the format RGBA(Red Green Blue Alpha) in CSS3 this problem can be considered solved. By using an advanced color representation format, web designers now have the ability to use alpha transparency for color.

Unlike opacity properties it can be applied to the font and borders and to the background of the block without changing the transparency of the block contents. RGBA color values ​​are an extension of RGB color values ​​with only an alpha channel - which determines the opacity of an object.

Syntax

color: rgba(0,96,160); / * blue color */ color: rgba (0,96,160,0.2 ); / * blue color with transparency */

Meaning RGBA colors given by: RGBA (red, green, blue, alpha).
The alpha parameter represents a number from 0.0(completely transparent) up to 1.0(completely opaque).

Compatibility

RGBA color values ​​are supported by browsers: IE9+, Firefox 3+, Chrome, Safari, and Opera 10+.

Who implemented

Lebedev Studio, Artyom Gorbunov Design Bureau, Ilya Birman immediately took advantage of this opportunity... On their sites, the underlining of links remained, but it became more elegant.

patpitchaya/