实现字数变多背景条跟着变长的效果

1、js动态监测字数变化可以实现

2、纯html及css实现

<span>水呀<i></i></span>

 span{
    letter-spacing: 0.2rem;   /*字间距*/
    position: relative;
    padding: 0  1.2rem;   /*设置padding值使得字体在背景条中间*/
    font-size: 1.6rem;
}
 span i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 0.8rem;
    background-color: #eeeeee;
    z-index: -1;
}

转载于:https://my.oschina.net/u/3486406/blog/902200