Detailed explanation of CSS text decoration text-decoration & text-emphasis

In CSS, text is one of the most common things we deal with every day. With text, some text decoration is essential.

This article will talk about two relatively new concepts of text decoration: text-decoration and text-emphasis . At the end, it will also explain some interesting dynamic effects of using background to simulate text underline.

Text-decoration Text decoration

text-decoration means text decoration, and it already existed in the very early specification CSS Level 2 (Revision 1) -- text-decoration. For example, we are very familiar with the underline text-decoration: underline .

p {
    text-decoration: underline;
} 

In the newer CSS Text Decoration Module Level 3 - text-decoration, text-decoration has been greatly enriched and updated, evolving into properties such as text-decoration-line , text-decoration-color , text-decoration-style , and text-decoration-thickness , which has not yet become a standard. These are their abbreviations.

in:

• text-decoration-line : Controls the type of decoration used to set text in an element, whether it is below, above, or through the text
• text-decoration-style : not only solid lines, similar to border-style , but also supports double solid lines, dotted lines, dashed lines, and very interesting wavy lines
• text-decoration-color : This is easy to understand, controls the color
• text-decoration-thickness : controls the thickness of the decoration line

Here is a very good picture to help you understand quickly:

CodePen Demo -- Text-decoration Demo

text-decoration-line can be set at the same time

An interesting point is that text-decoration-line can be set at the same time.

p {
    text-decoration-line: overline underline line-through;
} 

We can get three lines: upper, middle and lower.

Text-decoration can be transitioned and animated

Every value of text-decoration can be transitioned and animated. If used properly, it can be very useful in places where the text emphasizes something.

<p class="transition">Lorem ipsum dolor</p>

.transition {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 0.1em;
    cursor: pointer;
    transition: .5s;

    &:hover {
        text-decoration-color: pink;
        text-decoration-thickness: 0.15em;
        color: pink;
    }
} 

With another attribute text-underline-offset , we can also achieve interesting effects like the following:

Of course, the above example uses the transformation of text-underline-offset , but CSS itself does not support the transition animation of text-underline-offset . Here, CSS @property is used to cleverly implement the transition animation of text-underline-offset If you are interested, you can learn more about the usage of CSS @property .

CodePen Demo -- Text underline transition animation effect

Separate text-decoration-color from color

text-decoration-color and color can be different, similar to this.

.color {
    text-decoration-style: wavy;
    cursor: pointer;
    transition: .5s;

    &:hover {
        color: transparent;
        text-decoration-color: pink;
    }
} 

Interestingly, after doing this, we actually get a wavy line.

If we add wavy underline to the element's pseudo-element, and then add an animation on hover to animate the wavy line, we get a nice hover effect:

<p class="animation" data-content="Lorem ibsum dolor Lorem ibsum dolor">Lorem ibsum dolor</p>

.animation {
    position: relative;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    line-height: 2;
    
    &::before {
        content: attr(data-content);
        position: absolute;
        top: 0;
        left: 0;
        color: transparent;
        white-space: nowrap;
        text-decoration-line: underline;
        text-decoration-style: wavy;
        text-decoration-color: #000;
        z-index: -1;
    }
    &:hover::before {
        animation: move 3s infinite linear;
    }
}
@keyframes move {
    100% {
        transform: translate(-209px, 0);
    }
} 

We use pseudo-elements to add a text that is longer than the text itself, and the color is transparent, but the color of the wavy line is set. Then, when hovering, the wavy line is displaced by moving translate pseudo-element. By slightly adjusting the translate value, the beginning and end of the animation can be connected to achieve the effect of a moving wavy line.

CodePen Demo -- text-decoration Demo

text-emphasis text emphasis

text-emphasis means text emphasis. It is a new property added in CSS Text Decoration Module Level 3. It is used to enhance the effect of text emphasis.

Earlier, if we wanted to emphasize a few words, we might use more conventional text styles such as bold and italics :

{
    font-weight: bold; // bold font-style: italic; // italic}

Now, there is an interesting way to emphasize text - text-emphasis .

text-emphasis syntax

text-emphasis includes text-emphasis and text-emphasis-position , allowing us to add different emphasis decorations and different colors above or below the text.

Take a look at a simple Demo:

<p>
   This is <span>Text-emphasis</span>.
</p>

p span{
    text-emphasis: circle;
}

The effect of text-emphasis: circle is to add a circle graphic on top of the wrapped text. The effect is as follows:

Of course, the default is black, we can add color after the circle:

p span{
    text-emphasis: circle #f00;
} 

In addition to circle , there are many other graphics to choose from, and you can also customize the characters you pass in, even emoji expressions:

<p>
    ABCD E F
    GH
    I J
    KL
    <span class="emoji">M N</span>
</p>

.keyword {
    text-emphasis: circle #f00;
}
.word {
    text-emphasis: 'x' blue;
}
.emoji {
    text-emphasis: '😋';
} 

text-emphasis-position syntax

In addition to being above the text, you can also change the position of the emphasis shape within a certain range, choosing to place it above or below the text using text text-emphasis-position .

This property accepts two parameters: top and bottom and left and right:

text-emphasis-position: [ over | under ] && [ right | left ]?

.keyword {
    text-emphasis: circle #f00;
}
.word {
    text-emphasis: 'x' blue;
    text-position: over left;
}
.emoji {
    text-emphasis: '😋';
    text-position: under left;
}

When the writing order of the text is horizontal, similar to writing-mode: lr , only over and under are needed. When the text layout mode is vertical, similar to writing-mode: vertical-lr , the right or left keywords are used.

p {
    writing-mode: vertical-rl;
}
.keyword {
    text-emphasis: circle #f00;
}
.word {
    text-emphasis: 'x' blue;
    text-position: over left;
}
.emoji {
    text-emphasis: '😋';
    text-position: under right;
} 

Use background to simulate underline

In addition to text-decoration and text-emphasis provided by CSS natively, we can also simulate some text decoration effects through other elements.

The most common way is to use background to simulate underline.

Take a look at a simple DEMO, using background to simulate the underline effect of text:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>

p {
    width: 600px;
    font-size: 24px;
    color: #666;
}
a {
    background: linear-gradient(90deg, #0cc, #0cc);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    color: #0cc;
}

Use background to simulate the underline effect of text, the effect is as follows:

Alternatively, use background to simulate a dotted underline:

a {
    background: linear-gradient(90deg, #0cc 50%, transparent 50%, transparent 1px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: 100% 100%;
} 

CodePen Demo -- Use background to simulate underline and dashed underline

Of course, this is the most basic. By cleverly using the various properties of background , we can achieve various interesting effects.

Cleverly change background-size and background-position to achieve text hover effects

Here, by cleverly changing background-size and background-position properties, we can achieve some very interesting text hover effects.

Let's take a look at a demo like this. The core code acts on the <a> tag wrapped by the <p> tag:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>

a {
    background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
    background-size: 0 3px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: 1s all;
    color: #0cc;
}

a:hover {
    background-size: 100% 3px;
    color: #000;
}

Although we set background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff) , the default background-size: 0 3px at the beginning, which means that the underline is not visible at the beginning. When hovering, change background-size: 100% 3px . At this time, there will be a transformation from 0 3px to 100% 3px , which is a stretching effect from nothing to something.

Take a look at the final effect:

Since background-position is set to 0 100% , if background-position is set to 100% 100% , we can get a reverse effect:

// Keep everything else the same, only change background-position from 0 100% to 100% 100%
a {
    ...
    background-position: 100% 100%;
    ...
}

Let’s take a look at the effect. You can compare it with the animation above to see the specific differences:

CodePen Demo -- background underline animation

OK, if we use background to implement two overlapping underlines, and then use the two different background-position values ​​mentioned above, we can get a more interesting underline hover effect.

CSS code diagram. Note that the background-position values ​​of the two underlines simulated using background are different:

a {
    background: 
        linear-gradient(90deg, #0cc, #0cc),
        linear-gradient(90deg, #ff3c41, #fc0, #8500d8);
    background-size: 100% 3px, 0 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    transition: 0.5s all;
    color: #0cc;
}
a:hover {
    background-size: 0 3px, 100% 3px;
    color: #000;
}

You can get such an effect. In fact, every time you hover, there are two underlines moving:

CodePen Demo -- background underline animation

at last

Well, this is the end of this article. I have introduced some interesting properties and animations of text decoration. I hope it will be helpful to you😃

More wonderful CSS technical articles are collected in my Github -- iCSS. They are continuously updated. Welcome to click a star to subscribe and collect.

This is the end of this article about detailed explanation of CSS text decoration text-decoration & text-emphasis. For more relevant CSS text decoration content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!