CSS Text-decoration & text-emphasis

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

In this article, we will introduce two new concepts of text-decoration and text-emphasis. Finally, we will introduce some interesting dynamic effects of using background to simulate text underscores.

Text-decoration Text decoration

“Text-decoration”, meaning text decoration, has been around since the earliest Revision of CSS Level 2 (Revision 1). For example, the familiar text-decoration: underline.

p {
    text-decoration: underline;
}
Copy the code

CSS Text Decoration Module Level 3-text-decoration, text-decoration, text-decoration, text-decoration It is also called “text-decoration-line”, “text-decoration-color”, “text-decoration-style”, and “text-decoration-style”, which has not yet become a standard.

Among them:

text-decoration-line: controls the type of decoration used to set the text in an element, whether it is below, above, or across the text
text-decoration-style: Not just solid linessolid, similar to theborder-style, also supports double solid linesdoubleAnd point linedotted, dotted line,dashedAnd very interestingwavyWavy lines
text-decoration-color: This is easy to understand, control the color
text-decoration-thickness: Controls the thickness of the finishing line

Here’s a nice picture to help you understand it quickly:

CodePen Demo — Text-decoration Demo

Text-decoration – Line can be set at the same time

The interesting thing is that the text-decoration line can be set at the same time.

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

We can get the top, middle and bottom three lines.

Text-decoration can be used for transitions and animations

Each value of the text-decoration can be transitioned and animated. Rational use, in some areas of text emphasis, is very useful.

<p class="transition">Lorem ipsum dolor</p>
Copy the code

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

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

With another attribute, text-underline-offset, we can also achieve an interesting effect like the one shown below:

Of course, the above example uses the text-underline-offset transform, but CSS does not support text-underline-offset transition animation. Here, CSS @property is used to cleverly realize the text-underline-offset transition animation. If you are interested, you can understand the usage of CSS @property in detail.

CodePen Demo – Text underline transition animation effect

Text-decoration -color separated from color

It’s not the same as the color, it’s like this.

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

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

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

If we add the wavy underline to the element’s pseudo-element, and then add an animation to hover to make the wavy line move, we get a nice hover effect:

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

.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 3sinfinite linear; }}@keyframes move {
    100% {
        transform: translate(-209px.0); }}Copy the code

We use pseudo element to add a text longer than the text itself, and the color is transparent, but set the color of wavy line. Then when hover, we move the wavy line by moving the translate of pseudo element, and debug the translate value slightly, so that the animation can be connected end to end. Achieve the effect of moving wavy lines.

CodePen Demo — text-decoration Demo

Text – Emphasis on words

Text-emphasis (emphasis) Is a new attribute of the CSS Text Decoration Module Level 3. It is used to enhance text emphasis.

In the early days, if we wanted to emphasize a few words, we would probably use bold, italic, and the more general type of text:

{
    font-weight: bold; / / boldfont-style: italic; / / italics}Copy the code

Today, there is an interesting form of emphasis called text-emphasis.

The text – emphasis syntax

Text-emphasis contains both text-emphasis and text-position, which allow you to add different decorations and colors above or below text.

Here’s a simple Demo:

<p>
   This is <span>Text-emphasis</span>.
</p>
Copy the code

p span{
    text-emphasis: circle;
}
Copy the code

1. Text-emphasis: This element puts a circle on the top of the text that is wrapped. This element looks like this:

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

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

In addition to circles, there are a wide variety of shapes to choose from, as well as custom incoming characters and even emoji:

<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>
Copy the code

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

The text – emphasis – the position of grammar

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

This attribute takes up, down and left arguments:

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;
}
Copy the code

When the text is typesetted in horizontal layout (similar to writing mode: LR), only over and under are needed. When the text is typesetted in vertical mode, similar to writing mode: Vertical-lr, the right or left keyword is 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;
}
Copy the code

Use background to simulate underscores

In addition to the text-decoration and text-emphasis provided by CSS, there are other elements that simulate text decorations.

The most common is the use of background to simulate underlining.

Take a look at a simple DEMO that uses 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>
Copy the code

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;
}
Copy the code

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

Or, 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%;
}
Copy the code

CodePen Demo – Uses background to simulate underscores and dashed underscores

Of course, this is the most basic, clever use of background properties, we achieve a variety of interesting effects.

Subtly change`background-size` 与 `background-position`Implement text hover effect

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

Let’s start with a Demo where the core code works on a tag wrapped around a

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>
Copy the code

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;
}
Copy the code

We set background: Linear-gradient (90deg, # ff3C41, #fc0, #0ebeff), but initially default its background-size: When hover changes background-size to 100% 3px, it will have a change from 0 3px to 100% 3px, which is a stretch effect from nothing.

Look at the final result:

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

// Keep everything the same, just changebackground-position, from0 100%Instead of100% 100%
a{...background-position: 100% 100%; . }Copy the code

To see how it works, you can compare it to the GIF above to see exactly what the difference is:

CodePen Demo — background underline animation

OK, if we use background to implement two overlapping underscores, we can use the above two different background-position values, we can get a more interesting hover effect underscore.

The value of background-position is not the same as the value of background:

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.5 s all;
    color: #0cc;
}
a:hover {
    background-size: 0 3px.100% 3px;
    color: # 000;
}
Copy the code

You can get an effect like this: every hover, two underscores move:

CodePen Demo — background underline animation

The last

Well, that’s the end of this article, introducing some interesting properties and dynamic effects of text decoration, I hope it will help you 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.

Text-decoration Text decoration

Text-decoration – Line can be set at the same time

Text-decoration can be used for transitions and animations

Text-decoration -color separated from color

Text – Emphasis on words

The text – emphasis syntax

The text – emphasis – the position of grammar

Use background to simulate underscores

Subtly changebackground-size 与 background-positionImplement text hover effect

The last

Related Posts

Page reflux and redraw in detail

Wechat applet Canvas blur solution

VueConf US 2021: Vue installation increased by 51%, Vue 3 will be installed as the default version of Vue in Q2

Subtly change`background-size` 与 `background-position`Implement text hover effect