[分享]css中如何设置下划线的样式

CSS提供了很多样式可以让我们来设置下划线，以及下划线的样式、颜色等属性，下面我们一起来看看常见的几种设置下划线的样式。1. 使用textdecoration来添加下划线，这是最为常见的一种设置下划线...

CSS提供了很多样式可以让我们来设置下划线，以及下划线的样式、颜色等属性，下面我们一起来看看常见的几种设置下划线的样式。

1. 使用text-decoration来添加下划线，这是最为常见的一种设置下划线的方法，我们可以通过设置text-decoration属性的值为underline来添加下划线，具体的代码如下：

 p {
        text-decoration: underline;
    } 

2. 使用border-bottom来添加下划线，通过设置border-bottom属性的值来添加下划线，代码如下：

 p {
        border-bottom: 1px solid black;
    } 

3. 使用伪元素来添加下划线，这种方式是通过使用伪元素::after来添加下划线，代码如下：

 p::after {
        content: ';
        display: block;
        width: 100%;
        height: 1px;
        background-color: black;
    } 

4. 针对链接下划线的设置，我们可以使用a标签以及其伪元素来设置链接的下划线，代码如下：

 a {
        text-decoration: none;
        position: relative;
        color: blue;
    }
    a::after {
        content: ';
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 100%;
        height: 1px;
        background-color: blue;
        transform: scaleX(0);
        transform-origin: bottom left;
        transition: transform 0.3s ease-in-out;
    }
    a:hover::after {
        transform: scaleX(1);
    } 

总结：上述几种方法都可以用来设置下划线的样式，我们可以根据实际场景选择其中一种来使用。如果是链接下划线的设置建议使用第四种方法，让链接下划线样式更为优美。