关于css:CSS-文字装饰-textdecoration-textemphasis

在 CSS 中，文字算是咱们天天会打交道的一大类了，有了文字，则必不可少一些文字装璜。

本文将讲讲两个比拟新的文字装璜的概念 text-decoration 与 text-emphasis，在最初，还会解说应用 background 模仿文字下划线的一些乏味的动效。

text-decoration 文字装璜

text-decoration 意为文字装璜，在很早的标准 CSS Level 2 (Revision 1) — text-decoration 就曾经存在了。譬如咱们十分熟知的下划线 text-decoration: underline。

p {text-decoration: underline;}

而到了比拟新的 CSS Text Decoration Module Level 3 – text-decoration，text-decoration 失去了比拟大的丰盛更新，演化出了 text-decoration-line, text-decoration-color, text-decoration-style，和还未成为规范的 text-decoration-thickness 等属性，是它们的缩写。

其中：

• text-decoration-line：管制用于设置元素中的文本的润饰类型，是在文本下方、上方还是贯通文本
• text-decoration-style：不仅仅是实线 solid，相似于 border-style，还反对双实线 double、点划线 dotted、虚线 dashed 以及十分有意思的 wavy 波浪线
• text-decoration-color：这个好了解，管制色彩
• text-decoration-thickness：管制润饰线的粗细

这里有张十分好的图，帮忙大家疾速了解：

CodePen Demo — Text-decoration Demo

text-decoration-line 能够同时设置

有意思的一点是，text-decoration-line 能够同时设置。

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

咱们能够失去上中下三条线。

text-decoration 能够进行过渡与动画

text-decoration 的每个值都是能够进行过渡与动画的。正当利用，在一些文本强调的中央，十分有用。

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

配合另外一个属性 text-underline-offset，咱们还能够实现如下图这样乏味的成果：

当然，上述的例子中应用了 text-underline-offset 的变换，然而自身 CSS 是不反对 text-underline-offset 的过渡动画的，这里借助了 CSS @property 奇妙的实现了 text-underline-offset 的过渡动画，感兴趣的能够具体理解下 CSS @property 的用法。

CodePen Demo — 文字下划线过渡动画成果

text-decoration-color 与 color 拆散

text-decoration-color 与 color 是能够不一样的，相似于这样。

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

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

有意思，通过这样，咱们其实失去了一条波浪线。

如果咱们把 wavy 下划线加给元素的伪元素，而后在 hover 的时候增加一个动画，让波浪线动起来，失去一个十分好的强调 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);
    }
}

咱们利用伪元素增加了一段长于文本自身的文本，并且色彩为通明，然而设置了波浪线的色彩，而后 hover 的时候，通过静止伪元素的 translate 进行波浪线的位移，略微调试一下 translate 的值，能够做到动画的首尾相连，实现静止的波浪线的成果。

CodePen Demo — text-decoration Demo

text-emphasis 文字强调

text-emphasis 意为文字强调，是 CSS Text Decoration Module Level 3 才新增的一个属性，用于加强文字强调的成果。

在早些时候，咱们如果要强调几个字，可能更多是应用 加粗 ， 斜体 这种较为惯例的文字款式类型：

{
    font-weight: bold;   // 加粗
    font-style: italic;  // 斜体
}

当初，多了一种有意思的强调形式 — text-emphasis。

text-emphasis 语法

text-emphasis 蕴含了 text-emphasis 和 text-emphasis-position，容许咱们在文字上方或者下方增加不同的强调装璜以及不同的色彩。

看个简略的 Demo：

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

p span{text-emphasis: circle;}

text-emphasis: circle 的成果是给包裹的文字，在其上方，增加 circle 图形，也就是圆圈图形，成果如下：

当然，默认是彩色的，咱们能够在 circle 前面补充色彩：

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

除了 circle，还提供十分多种图形能够抉择，也能够自定义传入字符，甚至是 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>

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

text-emphasis-position 语法

除了在文字上方，还能够在肯定范畴内扭转强调图形的地位，抉择搁置在文字的上方或者下方，利用 text-emphasis-position。

这个属性承受高低与左右两个参数：

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

当文字的排版的书写程序是程度排版布局，相似 writing-mode: lr 时，只须要用到 over、under 即可，当文本的排版布局模式是垂直模式时，相似 writing-mode: vertical-lr，才会用到 right 或者 left 关键字。

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

应用 background 模仿下划线

除了 CSS 原生提供的 text-decoration 与 text-emphasis 之外，咱们还能够通过其余元素模仿一些文字装璜成果。

最常见的莫过于应用 background 模仿下划线了。

看个简略的 DEMO，应用 background 模仿文字的下划线成果：

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

应用 background 模仿文字的下划线成果，效果图如下：

又或者，应用 background 模仿虚线下划线：

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 — 应用 background 模仿下划线与虚线下划线

当然这个是最根底的，奇妙的使用 background 的各种属性，咱们实现各种有意思的成果。

奇妙扭转 background-size 与 background-position 实现文字 hover 动效

这里，通过奇妙扭转 background-size 与 background-position 属性，咱们能够实现一些十分有意思的文字 hover 成果。

先看这样一个 Demo，外围代码作用于被 <p> 标签包裹的 <a> 标签之上：

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

咱们尽管，设定了 background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff)，然而一开始默认它的 background-size: 0 3px，也就是一开始是看不到下划线的，当 hover 的时候，扭转 background-size: 100% 3px，这个时候，就会有一个 0 3px 到 100% 3px 的变换，也就是一个从无到有的舒展成果。

看看最初的成果：

因为设定的 background-position 是 0 100%，如果，设定的 background-position 是 100% 100%，咱们能够失去一个反向的成果：

// 其余都保持一致，只扭转 background-position，从 0 100% 改为 100% 100%
a {
    ...
    background-position: 100% 100%;
    ...
}

再看看成果，你能够比照着下面的动图看看具体的差别点在哪：

CodePen Demo — background underline animation

OK，如果咱们应用 background 实现两条重叠的下划线，再利用上述的两个不同的 background-position 值，咱们就能够失去一个更有意思的下划线 hover 成果。

CSS 代码示意，留神看两条应用 background 模仿的下划线的 background-position 的值是不一样的：

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

能够失去这样一种成果，其实每次 hover，都有两条下划线在挪动：

CodePen Demo — background underline animation

最初

好了，本文到此结束，介绍了对于文字装璜的一些有意思的属性及动效，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。