Underlined html font. Changing the display style of links in text
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 the ::before pseudo-element absolute positioning. 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 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 ( 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
There is a bunch different ways underlining design. You may remember Marcin Vichari's article “Crafting link underlines” on Medium. The Medium developers aren't trying to do anything crazy, they just want to create a nice line under the text.
This is the simplest underscore, but it has right size and it does not overlap letter extensions. And it is definitely better than the default underscore in most browsers. Medium had to face challenges to achieve its style on the web. Two years later, it’s still difficult for us to do everything beautiful underlining.
Goals
What's wrong with the usual text-decoration: underline ? If we're talking about About the ideal scenario, the underscore should do the following:
- position below the baseline;
- skip callouts;
- change the color, thickness and style of the line;
- work with multiline text;
- work on any background.
I believe these are all reasonable requirements, but as far as I know there is no intuitive way to achieve this using CSS.
Approaches
So what is this various ways, which we can use to 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 look at these methods one by one and talk about the pros and cons of each of them.
text-decoration
text-decoration is the most obvious way to underline text. You apply one property and that's enough. On small sizes This may look fine in a font, but increase the font size and the underlining starts to look awkward.
The most a big problem with text-decoration it's a lack of settings. You are limited to the color and font size of the text and there is no cross-browser way to change this. We'll talk about this in more detail later.
- easy to use;
- positioned below the baseline;
- skips callouts by default in Safari and iOS;
- emphasizes multiline text;
- works on any background.
- does not skip footers 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 border property, meaning you can easily change the color, thickness, and style.
This is what border-bottom looks like for inline elements.
The main drawback 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 decreasing the line-height , but then you'll lose the ability to wrap text. Good for individual lines, but not suitable anywhere else.
Additionally, we can use text-shadow to obscure the portion of the line next to the inline elements, simulating this by using the same color as the background. That is, this technique only works on a simple single-color background, without gradients, patterns or images.
On this moment We already use as many as four properties to design one line. It's a lot more work than just adding text-decoration.
- can skip callouts using text-shadow ;
- can change color, weight and line style;
- allows you to use transitions and animations of color and boldness;
- 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 moves in a complicated way;
- many additional properties are used for proper operation;
- when using text-shadow, highlighting text looks ugly.
box-shadow
box-shadow draws a subscript using two inner shadows: one creates a rectangle, and the second hides part of it. This means you need a solid color background for this to work.
You can use the same trick with text-shadow to fill in the gaps between underlines and callouts. But if the underline color is different from the text color - or it's just thin enough - the line won't collide with callouts as much as it would with using text-decoration.
- allows you to change the color and thickness of the line;
- works with multiline text.
- does not allow you to change the underline style;
- Doesn't work on any background.
background-image
The background-image method is closest to what we want and has the least amount of 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 standard display: inline; .
The next option does without linear-gradient , for effects you can add your own background image.
- can be positioned below the baseline;
- can skip callout elements using text-shadow ;
- works with custom images;
- wraps multiple lines of text;
- Works on any background as long as you don't use text-shadow .
- Image size may vary depending on screen resolution, browser and magnification.
SVG filters
I've played with this method quite a bit. You can create an SVG line filter that draws a line and then expands the text to mask out the part of the line that we want to be transparent. You can then give the filter an id and reference it in CSS something like filter: url('#svg-underline') .
The advantage of this approach is that transparency is achieved without using text-shadow , meaning we let callouts appear on any background, including gradients and background images! This only works on a single line of text, so keep that in mind.
Here's what it looks like in Chrome and Firefox:
Support in IE, Edge and Safari is problematic. It's difficult to test SVG filter support in CSS. You can use the @supports directive with filter , but this will only check the functionality of the filter link, not the functionality of the filter itself. My attempts ended in a tedious determination of the browser's capabilities; this is a noticeable drawback of the method.
- can be positioned below the baseline;
- can skip extension elements;
- allows changes in line color, thickness and style;
- 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 fascinating. I find it impressive what Wenting Zhang has accomplished with her command of JavaScript and attention to detail. If you haven't seen the Underline.js tech demo, stop reading and give it a minute. There's also a nine-minute talk from her on how it works, but I'll keep it short: The underline is drawn using elements
Despite the catchy name, Underline.js is just a technical demo. This means that you can't just plug it into your project without changing the code.
I thought I'd mention this as a proof of concept that
New text-decoration properties
You remember that I promised to talk more about text-decoration. The time has come.
This property works great on its own, but you can add some 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 is as always. So it goes.
text-decoration-color
text-decoration property-color 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 with the prefix in Safari. Here's the catch: if you have callouts, Safari will place an underline on top of the text.
text-decoration-skip
The text-decoration-skip property enables 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 not always struck through.
If you are using Normalize, please note that latest versions disable this property for the sake of consistent browser behavior. And if you want the underlining to not affect callouts, you need to manually activate it.
text-decoration-style
The text-decoration-style property offers the same styling options as the border-style property, with the addition of a wavy style.
Here is a list of available values:
- dashed
- dotted
- double
- solid
Currently the text-decoration-style property only works in Firefox, here is a screenshot from it:
What is missing
The text-decoration-* series of properties are much more intuitive to use than the others CSS properties for underlining. But if we take a closer look, there are not enough ways to set the thickness or position of the line to satisfy our needs.
After a little research, I found a couple more properties:
- text-underline-width
- text-underline-position
These 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 optimistically adding text-decoration-skip . It looks a little tacky in most browsers, but underlining has always been like this in browsers and people just won't notice. Plus, there's always a chance that, if you have patience, that underline will look good someday without you having to change anything the way browsers do.
For body text it makes sense to use background-image . This approach works, looks great, and there are Sass mixins for it. You can, in principle, skip text-shadow if the underline is thin or a different color from the text.
For single lines of text, use border-bottom along with any additional properties.
And if you need callouts to pop against a gradient or image background, try using SVG filters. Or just avoid using underscores.
In the future, when browser support gets better, 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 addresses the same issues.
Allows you to create different underlines in HTML: underline, overline, line-through text, etc. Let's combine this feature with the previous one and get:
The second line shows how everything is written in one row with text-decoration.
text-decoration-style — text underlining style
The option specifies the appearance of the decorative line for the / link. The new CSS guidelines have added wavy and double values, so there are now 5 of them:
- solid - solid line;
- double - double (from the first example above);
- dotted - consists of a sequence of dots;
- dashed - allows you to create a dashed CSS underline;
- wavy - a spectacular wavy line.
text-underline-position - CSS underline positioning
Using this property, you can control the position of the line relative to the font glyph.
A total of 4 options are available:
- auto — is located as close as possible to the text baseline;
- under - below the lowest border of the font;
- left and right - left/right for posts displayed vertically.
Here is a visual difference between underlining text using under and auto:
The difference, I think, is quite obvious.
text-decoration-skip - remove underlining for elements
Using this option, you can cancel (skip) the decoration of some elements in HTML line. To better understand valid values spaces, objects, box-decoration, edges, ink I will duplicate the picture from the previous post:
That is, for example, using ink you can make an underscore in CSS that would not intersect with the characters. The value objects allows you to skip inline elements (inline-block) - insert a span, and the solid line will break at the appropriate place:
The box-decoration, spaces, edges parameters are much less well supported by browsers, so their results sometimes differ from the expected ones. Here is the status of text-decoration compatibility/support at the time of writing:
Additional tricks for underlining links
Beginner users often ask some typical questions on the topic, so we also decided to consider them. General example is at the very bottom after the explanations.
How to remove link underline
a:hover ( text-decoration: underline; )
Both examples below allow you to understand the logic of how hover works: either you initially specify link underlining in the CSS, and then remove it in the hover, or vice versa.
If you have any other questions on the topic, ask them in the comments. We'll try to look into it later or give you some hints in the answers. The main thing in this matter is practice - try adding different properties for the text-decoration option directly in the examples or create your own test file. We hope everything has become clear on the topic of underlining text and links in CSS / HTML.
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
The text-decoration property is the simplest 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 biggest problem with the text-decoration property is the lack of 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 It 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.
There are currently 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 that creates the rectangle, and one that hides it. This means that for the method to work correctly, a uniform background is needed.
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 use Normalize, you need to know that recent 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.