设置css下划线与文字之间的距离的方法

设置css下划线与文字之间的距离的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

css中text-decoration属性设置出来的文字下划线不能够调整文字与下划线之间的距离,所以我们如果要调整下划线与文字之间的距离只能够使用border-bottom属性来设置文字下划线,下面我们就来看具体的实现方法。

我们设置css下划线与文字之间的距离需要用到的属性是padding-bottom和border-bottom

具体的代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        span{
            border-bottom: 2px solid pink;
            padding-bottom: 10px;
        }
        
    </style>
</head>
<body>
<span>
亿速云下划线距离</span>
</body>
</html>

感谢各位的阅读!看完上述内容,你们对设置css下划线与文字之间的距离的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。