The layout of any informative text implies the inclusion of semantic hyperlinks or anchors. These elements are added using the “a” (anchor) tag. Modern browsers by default display a similar element with Often, layout designers or web designers prefer to either change this style or remove it altogether.

In some cases this is really necessary. For example, in a dense link block, where unnecessary design will only overload the perception and make the document difficult to read. However, in some cases it is appropriate to maintain a distinction between text and links. If the site design completely excludes such formatting, then it is worth using any other type of highlighting of such elements. The most common type of differentiation today is the color contrast of anchors in the text. It's effective. The only slight disadvantage of this option will be the problem of highlighting text by people who cannot perceive different colors (color blindness). But this is such a low percentage of users that it can be neglected.

If, after all, it was decided to remove the underlining of links, then you will need some knowledge of the structure of the Internet page, namely CSS.

Remove link underlining from entire site

For a person who is well versed in web design and in particular, it will not be difficult. To do this, you just need to find and open the file in the site files that is responsible for the styling. Usually it lies in root directory and has a .css extension. You can remove underlining from links using this simple code:

text-decoration: none;

This small line will completely remove the underlining of all elements written using the “a” tag throughout the entire site.

But what if you don't have access to CSS file?

In this case, it is advisable to use tag Style at the beginning of the document. Works the same as a CSS file. In order to apply styles, it is necessary at the very beginning of the document (or HTML pages) add a construction in which the usual CSS rules styles.

These styles only apply to a specific page. They will not apply to other sections or documents of the site.

Remove link underline on hover

But what if you need to remove the link underline on hover? CSS can help us in this case too. The code will look like this:

text-decoration: none;

It is the pseudo-class “:hover” that is responsible for decorating elements when hovering over them.

By combining these two options, we can make the link underline appear only on hover, otherwise it will look like regular text:

text-decoration: none;

text-decoration: underline;

Using Identifiers and Classes

As you can see from the above, changing the styling of an element on a website or HTML document is quite easy. The disadvantages of such options are the impossibility of selectively applying styles: not to the entire site or document, but to a specific link.

There are several options to solve this problem.

You can remove the underlining of links inline. Although this is strictly not recommended from the point of view of optimizing the site.

To do this, you need to specify the Style parameter directly in the link tag:

The second option is more acceptable.

We introduce an additional class or id into the element and assign the styles we need to these selectors:

A class is written with a dot before its name:

None_decoration(

text-decoration: none;

The identifier is indicated by the # sign:

#none_decoration(

text-decoration: none;

This rule applies to both the CSS file and the Style tag

Changing the display style of links in text

This is also quite simple to do:

color :*specify the desired color in any format (*red, #c2c2c2, rgb (132, 33, 65)*)*;

Similar styling is applied according to the same rules as described for de-underlining a link. CSS rules in in this case identical. Changing the link color and removing the underline can be applied as a separate styling (then the link will remain underlined, but will change the color from the standard blue to the color you want).

Replacing standard styling

One last note. Instead of undoing the underline CSS links makes it possible to replace standard design values. To do this, just substitute the following values ​​into the text-decoration construct:

text-decoration-style:

• If you need a solid line, specify the value solid.
• For a wavy line - wavy.
• Double line - respectively double.
• The line can be replaced with a sequence of dots - dotted.
• Underline a word as a dotted line - dashed

You can also change the position of the line relative to the text:

The line-text-decoration-line construct can take the following values:

And the color (not to be confused with the text color!):

text-decoration-line: (any color in any format * red, #c2c2c2, rgb (132, 33, 65)*).

For convenience, all three positions can be written together in the construction:

text-decoration: red, line-through, wavy.

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 can be considered this problem 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/

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 appearance 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 ( 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 standard CSS text decoration We have removed 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 the CSS text underline color must match the color scheme you're using:

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

Underline for block elements like tag

can be done in two ways. For example, set the line under the text to the entire width of the block, regardless of the volume of the text. And also underline only the text. Next we will consider both options.

Line under the text across the entire width of the block

To create a line under the text, you should add the style property border-bottom to the element; its value is both the thickness of the line, its style and color (example 1).

Example 1. Full width line

HTML5 CSS 2.1 IE Cr Op Sa Fx

Example text

The distance from the line to the text can be adjusted by adding the padding-bottom property to the H1 selector. Result this example shown in Fig. 1.

Underline text

To underline just the text, you need to use the text-decoration property with the value 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

Example text

The black headline attracts attention even though it is black and not white.

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

When using the text-decoration property, the line is rigidly attached to the text, so its position and style cannot be determined.

On this page you will find examples on how to change HTML links when CSS help, which allows you to make them block links, icon links, without underlining, 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 adjustable 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 the 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. To change the appearance of links when they are under the mouse cursor, we 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.