Explain CSS text decoration & amp; text-emphasis

Time:2021-9-13

In CSS, text is a big category we deal with every day. With text, some text decoration is essential.

This paper will talk about two relatively new concepts of character decorationtext-decorationAndtext-emphasisFinally, we will explain how to use itbackgroundSimulate some interesting dynamic effects of text underline.

Text decoration

text-decorationIt means text decoration, which was standardized very earlyCSS Level 2 (Revision 1) — text-decorationIt already exists. For example, we are very familiar with underlinetext-decoration: underline。


p {
    text-decoration: underline;
}

And to a relatively newCSS Text Decoration Module Level 3 – text-decoration,text-decorationIt has been greatly enriched and updated, and evolvedtext-decoration-line, text-decoration-color, text-decoration-style, and not yet standardtext-decoration-thicknessAnd other attributes are their abbreviations.

Of which:

  • text-decoration-line: controls whether the decoration type used to set the text in the element is below, above or through the text
  • text-decoration-style: not just solid linessolid, similar toborder-styleIt also supports double solid linesdouble. dotted linedotted. dotted linedashedAnd very interestingwavyWave line
  • text-decoration-color: This is easy to understand. Control the color
  • text-decoration-thickness: controls the thickness of the finish line

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

CodePen Demo — Text-decoration Demo

Text decoration line can be set at the same time

The interesting thing is,text-decoration-lineCan be set at the same time.


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

We can get three lines up, middle and down.

Text decoration can be used for transition and animation

Each value of text decoration can be used for transition and animation. Rational use is very useful in some places emphasized in the text.


<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 attributetext-underline-offset, we can also achieve the following interesting effects:

Of course, it is used in the above exampletext-underline-offsetBut CSS itself is not supportedtext-underline-offsetTransition animation, here with the help ofCSS @propertyCleverly realizedtext-underline-offsetTransition animation, interested can specifically understand the nextCSS @propertyUsage of.

Codepen demo — Text underline transition animation effect

Text decoration color is separated from color

text-decoration-colorAndcolorIt can be different, like this.


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

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

Interestingly, after this, we actually get a wave line.

If we putwavyUnderline the pseudo element of the element, and then add an animation when hovering to make the wave line move, so as to get a very good effect of emphasizing hover:


<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 the pseudo element to add a text longer than the text itself, and the color is transparent, but set the color of the wavy line, and then move the pseudo element when hoveringtranslateCarry out the displacement of the wave line and adjust it slightlytranslateYou can connect the end of the animation and realize the effect of moving wavy lines.

CodePen Demo — text-decoration Demo

Text emphasis

text-emphasisIt means text emphasis, yesCSS Text Decoration Module Level 3A new attribute is added to enhance the effect of text emphasis.

Earlier, if we wanted to emphasize a few words, we might use bold,ItalicsThis more general text style type:

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

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

Text emphasis syntax

Text emphasis containstext-emphasisandtext-emphasis-position, allows us to add different accents and different colors above or below the text.

Look at a simple demo:


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

p span{
    text-emphasis: circle;
}

text-emphasis: circleThe effect is to add circle graphics, that is, circle graphics, to the text of the package. The effect is as follows:

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


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

exceptcircleIt also provides a wide variety of graphics to choose from, and you can customize the incoming characters or even Emoji expressions:


<p>
    A B C D  
    <span class="keyword">E F</span>
    G H
    <span class="word">I J</span>
    K L
    <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 above the text, you can also change the position of the emphasis graphics within a certain range. You can choose to place it above or below the texttext-emphasis-position。

This attribute accepts two parameters: up, down, 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 text typesetting is horizontal typesetting, the layout is similarwriting-mode: lrOnly need to useover、underWhen the text layout mode is vertical, it is similarwriting-mode: vertical-lr, will be usedrightperhapsleftkeyword.


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 CSS nativetext-decorationAndtext-emphasisIn addition, we can also simulate some text decoration effects through other elements.

The most common is to usebackgroundSimulated underline.

Look at a simple demo, usebackgroundUnderline effect of simulated 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;
}

usebackgroundThe underline effect of simulated text is as follows:

Or, usebackgroundSimulated dashed 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 underscores and dashed underscores

Of course, this is the most basic and ingenious usebackgroundFor various properties, we achieve various interesting effects.

Ingenious changebackground-sizeAndbackground-positionRealize the dynamic effect of text hover

Here, through clever changesbackground-sizeAndbackground-positionProperty, we can achieve some very interesting text hover effects.

Let’s take a look at such a demo. The core code acts on the<p>Label wrapped<a>Above label:


<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 have setbackground: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff), but at first it was defaultbackground-size: 0 3px, that is, you can’t see the underline at the beginning. When hover, it changesbackground-size: 100% 3px, at this time, there will be one0 3pxreach100% 3pxThe transformation of is a stretching effect from nothing.

See the final effect:

Due to the setbackground-positionyes0 100%, if setbackground-positionyes100% 100%, we can get a reverse effect:

//Everything else remains the same. Only the background position is changed from 0% to 100%
a {
    ...
    background-position: 100% 100%;
    ...
}

Look at the effect again. You can compare the above dynamic diagram to see the specific differences:

CodePen Demo — background underline animation

OK, if we usebackgroundRealize two overlapping underscores, and then use the above two different underscoresbackground-positionValue, we can get a more interesting underline hover effect.

CSS code diagram, pay attention to the two underlined lines simulated by backgroundbackground-positionThe values 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 hover, there are two underscores moving:

CodePen Demo — background underline animation

last

Well, this article ends here and introduces some interesting properties and dynamic effects of text decoration. I hope it will be helpful to you

More wonderful CSS technical articles are summarized in myGithub — iCSS, continuously updated. Welcome to a star subscription collection.

This is the text decoration & amp; This is the end of the text emphasis article. For more relevant CSS text decoration content, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!