[分享]css3文字下方加横线

在许多网站和应用中，都使用了一种十分时髦的设计方式，即在文字下方加上一条细细的横线。这种设计方式虽然看似简单，但实际上需要运用到一些 CSS3 的新特性。 首先，我们可以使用 textdecorat...

在许多网站和应用中，都使用了一种十分时髦的设计方式，即在文字下方加上一条细细的横线。这种设计方式虽然看似简单，但实际上需要运用到一些 CSS3 的新特性。

首先，我们可以使用 text-decoration 属性来为文字加上下划线，但这种方法会使得下划线与文字的底部对齐，并不符合我们的要求。因此，我们需要运用到另外一个属性：border-bottom。

 p {
        border-bottom: 1px solid black; /* 设置底部边框，宽度为 1 像素，颜色为黑色 */
        display: inline-block; /* 将段落元素转换为行内块元素 */
        padding-bottom: 5px; /* 留出一些间距使得下划线与文字有一定的距离 */
    } 

通过以上的 CSS3 属性和样式，我们可以轻松地为文字添加下划线，并自定义下划线的宽度、颜色和距离等参数。这种设计方式非常简单、时尚且易于实现，值得广泛应用。