How to make link underlining thin and pretty. Beautiful css underline elements HTML tags underline

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 amount of text. And also underlining to do only at the text. Let's look at both options next.

Line under the text for the full width of the block

To create a line below the text, add the border-bottom style property to the element, its value is the line width, style, and color at the same time (example 1).

Example 1: Full Width Line

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)

Also with the help border you can set:

• 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

Description

Adds text decoration in the form of underlines, strikethroughs, lines above text, and blinking. More than one style can be applied at the same time by listing values ​​separated by spaces.

Syntax

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

Values

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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 up to version 7.0 does not support the inherit value. The line obtained with the line-through value is higher in IE7 than in other browsers; IE8 has fixed this bug.

I present short snippets of code (snippet) CSS, to implement the selection of link anchors with a smooth underline on hover.
Why is it necessary to highlight the text from the general mess, this is a no-brainer. There is a great variety of ways and types of link design, everything is limited only by the imagination of the master.
With the help of the :hover pseudo-class and magic, you can hover over standard, dull-looking bluish links with just about any effect.
The solutions that will be discussed today are not anything particularly amazing or unusual. Everything is simple, without any bells and whistles, just highlighting the link with color and light animation of the underline.

I will write in detail only the CSS code, since there is no need to change and add anything on the Html side.

css

First, using the line-height property: set the line spacing depending on the baseline of the font, your value may be different. Let's make the link inline-block, embedded in the structure of the text, by setting its display property to inline-block . Get rid of the standard underline by writing text-decoration:none; and fill the link with the color we need.

a ( line- height: 1 ; display: inline- block; color: #ffeb3b; text- decoration: none; cursor: pointer; )

a ( line-height: 1; display: inline-block; color:#ffeb3b; text-decoration:none; cursor: pointer; )

We then use the :after pseudo-element so that we can add an extra element, in our case a line, and define a simple transition effect in the transition: property. Initially set the line width to zero width: 0%; , we define the height in 2px. The color of the line can be any, in the example I did not fantasize too much and set the color of the link text in accordance.

a: after ( display: block; content: "" ; height: 2px; width: 0 %; background- color: #ffeb3b; transition: width . 3s ease- in- out; )

a:after ( display: block; content: ""; height: 2px; width: 0%; background-color: #ffeb3b; transition: width .3s ease-in-out; )

The only thing left is to add some movement to our link. To do this, we use a couple of pseudo-classes: hover and: focus . The first will determine the style of the link on hover, the second will work when the cursor is “tightly” placed on the link. Here we will change the width value, set it to 100%.
Now, when hovering or focusing on the link, the stylized underline will show itself to the user's gaze, smoothly with a barely noticeable delay, the time of which, we prudently determined earlier in the transition: property.

a: hover: after, a: focus: after ( width: 100%; )

a:hover:after, a:focus:after ( width: 100%; )

As a result, we get the following picture:

The entire code assembly will look like this:

a ( display : inline-block ; color : #ffeb3b ; line-height : 1 ; text-decoration : none ; cursor : pointer ; ) a: after ( background-color : #ffeb3b ; display : block ; content : "" ; height : 2px ; width : 0% ; -webkit-transition: width .3s ease-in-out; -moz--transition : width .3s ease-in-out; transition : width .3s ease-in-out; ) a: hover : after , a: focus : after ( width : 100% ; )

a ( display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; ) a:after ( background-color: #ffeb3b; display: block; content: ""; height: 2px; width: 0%; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out; transition: width .3s ease-in-out; ) a:hover:after, a:focus:after ( width: 100%; )

Of course, this is just one of the simplest and most modest options for link design. Experiment more, add colors, use animation, move to the right or left, make links like flippers, etc., etc., the main thing is not to overdo it, everything should be with feeling, sense, and arrangement.

Update and additions from 10/22/2017

There were questions in the comments about how to make an underline from the center of the link text, with a smooth stretch to the sides. If there is demand, then there will be supply.

Everything is quite simple, you just need to add a couple of new properties, that is, for the main element a to determine the positioning of the relative position: relative; , and for the a:after pseudo-element, position:absolute; with a distance from the left edge of the parent element left:50%; , as well as using the transform property to determine the horizontal shift of the element by the specified value transform:translateX(-50%) .

As a result, we get the following result:

In the collection, all the css code, for smooth underlining of the link from the center, should look something like this:

a ( display : inline-block ; color : #ffeb3b ; line-height : 1 ; text-decoration : none ; cursor : pointer ; position : relative ; ) a: after ( background-color : #ffeb3b ; display : block ; content : "" ; height : 2px ; width : 0% ; left : 50% ; position : absolute ; -webkit-transition: width .3s ease-in-out; -moz--transition : width .3s ease-in-out ; transition : width .3s ease-in-out; -webkit-transform: translateX(-50% ) ; -moz-transform: translateX(-50% ) ; transform : translateX(-50% ) ; ) a: hover : after , a: focus : after ( width : 100% ; )

a ( display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; position:relative; ) a:after ( background-color: #ffeb3b; display: block; content : ""; height: 2px; width: 0%; left:50%; position:absolute; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out ; transition: width .3s ease-in-out; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); ) a:hover: after, a:focus:after ( width: 100%; )

Today, given that all modern browsers more and more confidently support properties from the CSS3 clip, there are practically no restrictions for the original design of links, by and large, it all depends on your fantasies, and there are plenty of ready-made solutions on the Internet, if you wish. found, as they say - for every taste and color.

With all respect, Andrew

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 display a similar element by default with Layout designers or web designers often choose to either change this style or remove it altogether.

In some cases this is really necessary. For example, in a dense reference block, where extra design will only overload perception and make it difficult to read the document. However, in some cases it is advisable to keep the distinction between text and links. If the site design completely excludes such formatting, then it is worth using any other type of selection of such elements. The most common type of demarcation today is the color contrast of anchor text. It's efficient. 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, nevertheless, it was decided to remove the underlining of links, then some knowledge of the structure of the formation of the web page, namely CSS, will be needed here.

Remove link underlining from entire site

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

text-decoration: none;

This small line will completely remove the underline of all elements written with the "a" tag throughout the site.

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

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

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

Remove link underline on hover

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

text-decoration: none;

It is the “:hover” pseudo-class that is responsible for decorating elements on hover.

By combining these two options, we can make the underline of the link only show on hover, otherwise everything will look like plain text:

text-decoration: none;

text-decoration: underline;

Applying Identifiers and Classes

As you can see from the above, it is quite easy to change the styling of an element on a website or html document. 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 solutions to this problem.

You can remove the underlining of links inline. Although it is categorically not recommended to do this in terms 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 already assign the styles we need to these selectors:

The 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.

Change the display style of links in text

In addition to the possibility, it allows you to apply other types of styling. Often, web designers or layout designers use a change in its color relative to the main text to highlight link text.

To do this is also quite simple:

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

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

Replacing the default styling

One last remark. Instead of de-emphasizing links, CSS gives you the ability to override default styling 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 solid value.
• For a wavy line - wavy.
• The double line - accordingly double.
• The line can be replaced by a sequence of dots - dotted.
• Underline the word as a dotted line - dashed

And you can also change the position of the line relative to the text:

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

And the color (not to be confused with 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.