# CSS下划线
\n**作者：PAPEREE｜日期：2024-02-07**
\n
\n## 少有的教程
\n有没有人发现，ee博客的画风十分甚至二十分独特（
\n没错，**黑白水墨屏**，~~过度花哨的~~多且密集的**文字装饰**。
\n比较令人眼前一~~黑~~亮的，大概得非下划线莫属。
\n毕竟ee为了区分不同的元素，又不想对文字本身的颜色下手（~~小声BB~~
\n
\n<style>
\n.uwu {
\n text-underline-offset:0;
\n text-decoration-thickness:0!important;
\n}
\n.uwu_,.uwu__:hover {
\n text-underline-offset:-9px;
\n text-decoration-thickness:9px!important;
\n}
\n.uvu,.uvu_ {
\n text-underline-offset:-18px;
\n text-decoration-thickness:18px!important;
\n}
\n.uwu__ {
\n text-underline-offset:0;
\n text-decoration-thickness:2px!important;
\n transition:0.14s ease-in-out all;
\n}
\n.uvu__ {
\n text-decoration-thickness:18px!important;
\n text-decoration-color:#333!important;
\n}
\n.uvu__:active {
\n text-decoration:none;
\n}
\n.uxu {
\n text-decoration:overline!important;
\n}
\n.uxu_ {
\n text-decoration:underline overline!important;
\n}
\n.uwu_,.uwu__,.uvu,.uvu_ {
\n text-decoration-color:#4F0!important;
\n}
\n.uwu,.uwu_,.uwu__,.uvu {
\n text-decoration:underline;
\n}
\n.uvu_,.uvu__ {
\n text-decoration:line-through;
\n}
\n</style>
\n
\n## 下划线种类
\n- `text-decoration:underline solid;`
\n<span class="uwu">这是普通的下划线</span>
\n
\n- `text-decoration:underline double;`
\n<span class="uwu" style="text-decoration-style:double;">这是DPG（双重身）下划线</span>
\n
\n- `text-decoration:underline dashed;`
\n<span class="uwu" style="text-decoration-style:dashed;">这是虚的下划线（雾</span>
\n
\n- `text-decoration:underline dotted;`
\n<span class="uwu" style="text-decoration-style:dotted;">这是点状的下划线</span>
\n
\n- `text-decoration:underline wavy;`
\n<span class="uwu" style="text-decoration-style:wavy;">这是大波浪<s>薯片</s>下划线</span>
\n
\n### 特殊下划线
\n- `text-decoration-line:grammar-error`
\n<span class="uwu" style="text-decoration-line:grammar-error;">这是普通报错的波浪线（雾</span>
\n
\n- `text-decoration-line:spelling-error`
\n<span class="uwu" style="text-decoration-line:spelling-error;">这是危险报错的波浪线（雾</span>
\n
\n这两种线出现在`Google`浏览器的F12控制台里，我不清楚是否被所有主流浏览器支持。
\n值得一提的是，在下文中下划线`underline`所有属性，在它们身上通通不适用。
\n
\n## 细节的更改
\n种类满意了，但下划线的摆放、宽度、颜色依旧不容乐观咋办？万能的CSS当然拥有修改的属性。
\n
\n### 更改位置
\n使用方法：`text-underline-position:<位置>;`
\n**位置拥有如下值**：
\n- `auto`｜自动计算下划线是放在字母基线上还是下。
\n- `under`｜强制使下划线位于字母基线下，确保下标不会被下划线阻挡（来自bing）。
\n- `left`和`right`｜在竖直排版下分别位于文字左右，在水平排版模式下与`under`相同。
\n
\n### 更改偏移量
\n请加上前提属性（其他位置未尝试）：`text-underline-position:under;`
\n使用方法：`text-underline-offset:<偏移量>`（正上负下）
\n- <span class="uwu" style="text-underline-offset:1px!important;">这是位置最舒服的下划线（1px</span>
\n- <span class="uwu" style="text-underline-offset:-8px!important;">这是想当划线的下划线（-8px（雾</span>
\n- <span class="uwu" style="text-underline-offset:-20px!important;">这是想当上划线的下划线（-20px（雾</span>
\n- <span class="uwu" style="text-underline-offset:30px!important;">这是想逃跑的下划线（30px（雾</span>
\n
\n<br>
\n
\n### 更改宽度
\n使用方法：`text-decoration-thickness:<宽度>;`
\n- <span class="uwu" style="text-decoration-thickness:2px!important;">这是宽度最舒服的下划线（2px</span>
\n- <span class="uwu" style="text-decoration-thickness:5px!important;">这是有点宽的下划线（5px</span>
\n- <span class="uwu" style="text-decoration-thickness:30px!important;">这是有亿点宽的下划线（30px（雾</span>
\n
\n<br>
\n
\n### 更改颜色
\n虽说不想给博客涂上五彩斑斓的颜色，但也不得不给黑和白改浓度（被打
\n使用方法：`text-decoration-color:<颜色>;`
\n- <span class="uwu" style="text-decoration-color:#4F0;">这是ee最喜欢的下划线（#44FF00（雾</span>
\n
\n## 高级用法
\n### 下划线背景板
\n如果**暂且没有**使用下划线的**需求**，还可以结合以上三者，将其代替`background`使用。
\n```
\n.underline {
\n text-underline-position:under;
\n text-underline-offset:-9px;
\n text-decoration:underline;
\n text-decoration-thickness:9px;
\n text-decoration-color:#44FF00;
\n}
\n```
\n**效果如此**｜<span class="uwu_">这是想当荧光笔的下划线（雾</span>
\n
\n### 加点动画？
\n```
\n.underline {
\n text-underline-position:under;
\n text-decoration:underline;
\n text-decoration-thickness:2px;
\n text-decoration-color:#44FF00;
\n transition:0.14s ease-in-out all; /* 可以先学下过渡属性的使用 */
\n}
\n.underline:hover {
\n text-underline-offset:-9px;
\n text-decoration-thickness:9px;
\n}
\n```
\n**效果如此**｜<span class="uwu__ pointer">将鼠标移动到此处</span>
\n
\n## 更多的线条
\n那么这期教程——到此结束……等等别走！
\n我在研究下划线的同时，还发现了上划线、划线与下划线的**区别**。
\n
\n### 关于上划线
\n上划线`overline`的待遇可比下划线差多了。
\n下划线所有`text-underline`开头的属性，上划线都没有，~~划线：我不也没有~~。
\n~~谁让上划线压根不通用，而且下划线就能做出上划线效果~~。
\n与划线**相同**，上划线也可以调宽度，不管宽度如何，上划线底部永远在文字上方。
\n**效果如此**｜<span class="uwu uxu">这是普通的上划线</span>
\n
\n<f1>与下划线组合一下？</f1>
\n```
\n.up-and-down {
\n font-weight:bold; /* 这个无所谓 只是让旁边的竖杠和线的宽度一样 */
\n text-decoration:underline overline;
\n text-decoration-thickness:2px;
\n}
\n```
\n**效果如此**｜<b><span class="uwu uxu_" style="text-decoration-thickness:2px!important;">|等等 是不是有点太奇怪了？|</span></b>（左右两边是竖杠`|`
\n
\n### 关于划线
\n划线与下划线最大的区别，在于**图层**。
\n下划线置于文字下层，而划线`line-through`置于文字上层。
\n
\n**下划线**｜<span class="uvu">下划线在文字后面</span>
\n**划线**｜<span class="uvu_">划线在文字前面</span>（内容：划线在文字前面（雾
\n
\n另外，划线没有`text-underline-offset`属性，不管宽度如何，永远都会居中。
\n
\n<f1>让我们来利用划线的特性！</f1>
\n如果**暂且没有**使用划线的**需求**，你还可以这么霍霍这层**遮障**：
\n```
\n.line-through {
\n text-decoration:line-through;
\n text-decoration-thickness:18px;
\n text-decoration-color:#333;
\n user-select:none; /* 毕竟点两下就选中很不爽是吧（逃 */
\n}
\n.line-through:active {
\n text-decoration:none;
\n}
\n```
\n**效果如此**｜<span class="uvu__ unselect pointer">永远不会放弃你~</span>（长按文本查看真相
评论区
发表评论