[分享]css下划线显示不出来

在编写网页时，如果我们想要对文本进行下划线的添加，我们通常会使用CSS的text-decoration属性来实现，如下所示：
pre { text-decoration: underline; }
然而，有些时候我们会发现，即便我们已经加入了这样的CSS代码，但下划线依然无法在网页上正确地显示出来。这种情况可能有多种原因，以下是其中一些可能导致下划线无法显示的原因及解决方法。
一、字体问题
某些字体的底部会被截断，导致下划线也无法正确显示。此时，我们可以选择将字体替换为其他字体，或者通过将字体大小调大或调小来解决问题。当然，如果使用web字体，将其下载至本地，并在CSS文件中正确地引用也是解决此问题的有效方法。
二、line-height问题
在某些情况下，由于line-height的值过小或过大，会造成下划线无法正确显示。若是值过小，下划线会被压缩在文本底部，若是值过大，下划线会和文字产生距离。建议在设置CSS的line-height时，选择与文字大小相近的数值，即可解决此类问题。
三、继承问题
有时候，我们会在代码中加入text-decoration: underline显示效果，但由于继承决定的原因，下划线依旧无法正确显示。这时，我们可以尝试使用!important关键字来取消继承，强制使CSS样式生效。如下所示：
pre { text-decoration: underline!important; }
总之，如果在网页开发中出现下划线无法正常显示的情况，不要惊慌，通过以上几个方面进行检查排除，或许能够为您解决困扰。