具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wavy-line-decoration {
position: relative;
line-height: 1.5em;
}
.wavy-line-decoration::before {
content: '';
position: absolute;
bottom: -3px;
width: 100%;
height: 0.25em;
background: // 可以给同一个元素同时添加多个背景渐变图层，用逗号隔开，要编辑不同渐变图层的的background-repeat 和 background-size等同理，用逗号隔开
linear-gradient(45deg, transparent, transparent 45%,red 45%, red 55%,transparent 55%, transparent 100%),
linear-gradient(135deg, transparent, transparent 45%,red 45%, red 55%,transparent 55%, transparent 100%);
background-size: 0.5em 0.5em;
background-repeat: repeat-x, repeat-x;
}
</style>
<title>Document</title>
</head>
<body>
<div>
<span class="wavy-line-decoration">我是一些带波浪线的文字信息</span>
</div>
<script src="index.js"></script>
</body>
</html>
呈现的效果如下图
QQ图片20210706215125.png
