CSS 文字裝飾 text-decoration & text-emphasis

在 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

最後

好了，本文到此結束，介紹了關於文字裝飾的一些有意思的屬性及動效，但願對你有幫助 😃

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。