html文字添加波浪线,利用css渐变给文字下方加波浪线

具体代码如下

.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;

}

Document

我是一些带波浪线的文字信息

呈现的效果如下图

QQ图片20210706215125.png