css文字下划线能设置距离

html-css010

css文字下划线能设置距离,第1张

有时候UI设计的时候文字下方会有一个下划线，所以我们经常用 text-decoration:underline 来设置一个下划线，但是呢，发现这个下划线和文字特么的重合了，来没法设置，只能用别的方法代替了，啪啪啪的写一大堆css

现在宣布： 春天来了: text-underline-offset

这个css可以设置距离文字的距离，百分比，还有一个注意点就是一定要和 text-decoration:underline 一起使用，否则不起作用，下面看一个例子

html

css

css里给h2文字设置鼠标经过下。

1、鼠标滑过的文字与图片必须是在一个容器内，并且是容器盒子内相邻的元素。

2、需要将图片先进行隐藏。

3、设置文字滑过时hover+图片样式才让图片显示出来。

css去掉下划线只要我们把text-decoration属性改成none就可以了。

并不是很难，在HTML中，我们可以使用u标签来加下划线，但是在css中我们只能使用text-decoration属性，我们想把下划线设置成红色，只要我们保持和字体的颜色相同就可以了。在css中，我们可以使用text-decoration属性来表示下划线和删除线等样式，首先我们要了解一下text-decoration属性。

text-decoration属性一共有五个值，分别是none，blink，underline，line-through，overline，其中underline就表示下划线。语法如下：

div{text-decoration:none}表示：一般去掉下划线

div{text-decoration:underline}表示一般添加下划线样式

div{text-decoration:line-through}一般表示贯穿线

div{text-decoration:overline}设置上划线样式