CSS text decoration & text emphasis

Time:2021-10-22

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;
}

CSS text decoration & text emphasis

And to a relatively newCSS Text Decoration Module Level 3 – text-decorationtext-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:

CSS text decoration & text emphasis

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;
}

CSS text decoration & text emphasis

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;
    }
}

CSS text decoration & text emphasis

With another attributetext-underline-offset, we can also achieve the following interesting effects:

CSS text decoration & text emphasis

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;
    }
}

CSS text decoration & text emphasis

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);
    }
}

CSS text decoration & text emphasis

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 more wordsBoldItalicsThis 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:

CSS text decoration & text emphasis

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

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

CSS text decoration & text emphasis

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: '😋';
}

CSS text decoration & 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 useoverunderWhen 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;
}

CSS text decoration & text emphasis

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:

CSS text decoration & text emphasis

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%;
}

CSS text decoration & text emphasis

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:

CSS text decoration & text emphasis

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:

CSS text decoration & text emphasis

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:

CSS text decoration & text emphasis

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:)

If you want Get to get the most interesting CSS information, don’t miss my official account.ICSS front end anecdotes 😄

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

If you have any questions or suggestions, you can communicate more. The original articles have limited writing style and shallow talents. If there is anything wrong in the article, please let me know.