css中文字下方添加波浪线

CSS中有一种很有趣的样式效果，可以在文字下方添加一个波浪线。这种效果可以为文字增加一份独特的设计感，使整个页面看起来更加生动有趣。在下面的代码中，我会为大家介绍如何实现这种波浪线样式。

.text{
    position: relative;
    display: inline-block;
    font-size: 24px;
    padding-bottom: 5px;
}
 
.text::after{
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 4px;
    width: 100%;
    background: #61A0D5;
    border-radius: 15px 15px 0px 0px;
    transform-origin: center;
    transform: rotate(-3deg);
} 

上面的代码中，我们首先创建了一个名为“text”的class，用于包含需要添加波浪线的文字。我们设置了position为relative，以便在text元素中使用绝对定位。接着，我们调整了font-size和padding-bottom属性，使得波浪线能够完美地与文字对齐。

在伪元素::after中，我们设置了一个高度为4px的波浪线，并为其设置了背景色、圆角和倾斜角度。通过调整border-radius和transform属性，我们使波浪线看起来更加自然简洁。在最后，我们将波浪线的位置设置为文本下方，这样便能够完美地展现出波浪线的样式效果。

现在，我们完成了波浪线样式的设计。只需要将该class应用于需要添加波浪线的文本元素中，便能够在网页中展现出酷炫的波浪线效果。