CSS text-decoration

2022-04-21
css

文字装饰，(text-decoration)，通常在<a>标签中会经常遇到，即他的下划线他，通常我们会直接使用text-decoration: none 直接去掉下划线，而在新的 CSS 规范中“CSS Text Decoration Module L3”对text-decoration有较好的样式，同时支持了：

ID	DA	FA
text-decoration-line	文本的装饰线（`可以多个搭配`）
	none	不产生文本装饰线，即下划线
	underline	每行都有下划线
	overline	每一行的文本上面都有一行下划线（可与`underline`配合使用）
	line-through	每行的中间都有一行下划线
text-decoration-style	下划线样式
	solid	实心
	double	双下划线
	dotted	虚线（`更细`）
	dashed	粗一点的虚线
	wavy	波浪线
text-decoration-color	下划线颜色
text-decoration	文本装饰属性（通常用于写`text-decoration: none`，他也是`text-decoration-line` 的简写）
text-underline-position	下划线位置
	auto	基于字母的基线处或下方
	under	下划线位置基于元素文本内容下方
	left	在垂直文字下，下划线与下方对齐，与文本的左边缘对齐
	right	在垂直文字下，下划线与下方对齐，与文本的右边缘对齐

值得注意的是，我们通过配合text-underline-offset属性可以实现他的动画效果，当然，他本身并不支持变换，因此需要通过使用@property来实现过度，但是@property是一项实验性技术，目前的兼容，还是很差。。

@property --offset {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

xu-t1 {
  text-underline-offset: var(--offset, 10px);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: @color-blue;
  transition: --offset 400ms, text-decoration-color 400ms;
}

xu-t1:hover {
  --offset: 10px;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: @color-blue;
  transition: --offset 400ms, text-decoration-color 400ms;
}

⬅️ Go back