CSS 文本装饰 text-decoration属性

在CSS中，使用 text-decoration属性，可以在文本上方、下方、或中间添加装饰线，可选值为 none | underline | overline | line-through | blink，默认值为 none。none 无装饰，underline 下划线 ，overline 上划线，line-through 文字中间贯穿线，blink 闪烁。装饰线的颜色与文本的颜色相同。

默认情况下，文本都是没有装饰线的，但超链接是个例外，它默认就带有下划线。当然，可以把 text-decoration属性的值设置为 none，去掉超链接的下划线，当鼠标悬停后，再添加下划线，来提醒用户当前文本为链接文本。如：

1. a {
2. text-decoration: none;
3. }
4. a:hover {
5. text-decoration: underline;
6. }

文本装饰线的另一个常见用法，就是修订文本，在被删除文本上增加删除线。还有团购网站，在原价上增加删除线，做删除状。其实，还可以使用 text-decoration属性，为文本同时添加多条装饰线。如：

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

上述规则会为段落文本同时增加上划线、下划线和中间贯穿线。运行结果如图 3‑21 所示：

图3-21 text-decoration属性效果

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。