text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。

文本修饰属性会延伸到子元素。这意味着如果祖先元素指定了文本修饰属性，子元素则不能将其删除。例如，在如下标记中<p>This text has <em>some emphasized words</em> in it.</p>，应用样式``p { text-decoration: underline } 会对整个段落添加下划线，此时再添加样式 em { text-decoration: none } 则不会引起任何改变，整个段落仍然有下划线修饰。然而，新加样式 em { text-decoration: overline } 则会在标记的文字上再添加上这种overline样式。

text-decoration属性是一种简写属性，并且可以使用普通属性三个值中的任何一个。普通属性如下：text-decoration-line，text-decoration-color和text-decoration-style

一，语法

  1. <p class="under">This text has a line underneath it.</p>
  2. <p class="over">This text has a line over it.</p>
  3. <p class="line">This text has a line going through it.</p>
  4. <p>This <a class="plain" href="#">link will not be underlined</a>,
  5.     as links generally are by default. Be careful when removing
  6.     the text decoration on anchors since users often depend on
  7.     the underline to denote hyperlinks.</p>
  8. <p class="underover">This text has lines above <em>and</em> below it.</p>
  9. <p class="blink">This text might blink for you,
  10.     depending on the browser you use.</p>
  12. .under {
  13.   text-decoration: underline red;
  14. }
  15. .over {
  16.   text-decoration: wavy overline lime;
  17. }
  18. .line {
  19.   text-decoration: line-through;
  20. }
  21. .plain {
  22.   text-decoration: none;
  23. }
  24. .underover {
  25.   text-decoration: dashed underline overline;
  26. }
  27. .blink {
  28.   text-decoration: blink;
  29. }

image.png

image.png

  1. p {
  2.     text-decoration-line: overline underline line-through;
  3. }

可以多个线段去使用

  1. .transition {
  2.     text-decoration-line: underline;
  3.     text-decoration-color: transparent;
  4.     text-decoration-thickness: 0.1em;
  5.     cursor: pointer;
  6.     transition: .5s;
  8.     &:hover {
  9.         text-decoration-color: pink;
  10.         text-decoration-thickness: 0.15em;
  11.         color: pink;
  12.     }
  13. }
  1. .animation {
  2.     position: relative;
  3.     text-decoration: none;
  4.     overflow: hidden;
  5.     cursor: pointer;
  6.     line-height: 2;
  8.     &::before {
  9.         content: attr(data-content);
  10.         position: absolute;
  11.         top: 0;
  12.         left: 0;
  13.         color: transparent;
  14.         white-space: nowrap;
  15.         text-decoration-line: underline;
  16.         text-decoration-style: wavy;
  17.         text-decoration-color: #000;
  18.         z-index: -1;
  19.     }
  20.     &:hover::before {
  21.         animation: move 3s infinite linear;
  22.     }
  23. }
  25. @keyframes move {
  26.     100% {
  27.         transform: translate(-209px, 0);
  28.     }
  29. }