css 代码片段

1. 文字下划线

1.1 方法一 使用伪元素

通过上述示例可以明显看出,在不换行的情况下,a 标签和 span 标签的表现效果满足基本需求。 p 标签就差一些,因为 p 标签的默认样式是 display: block; ,所以我们需要将 p 标签的 display 属性设置为 inline-block ,这样就可以实现和 a 标签和 span 标签一样的效果了.(仅限于不换行时的效果)

一旦遇到换行,就会出现问题了,则不能满足文字下划线的需求了,这时候就需要使用伪元素来实现了。

1.2 方法二 使用背景渐变色

可以看到使用背景渐变色的方法里,a 标签和 span 标签都在换行中都可以实现文字下划线,但 p 标签就不行了。