左右下划线，中间文字

最新推荐文章于 2024-01-07 17:41:29 发布

weixin_30612769

最新推荐文章于 2024-01-07 17:41:29 发布

阅读量177

点赞数

原文链接：http://www.cnblogs.com/freddyhuang/p/8733594.html

版权

H5 方式：

<!--文字说明-->
                <div class="textBox">
                    <div class="lineL"></div>
                    <div class="text">还有<b>2</b>颗星就可以获得酒票啦！</div>
                    <div class="lineR"></div>
                  </div>

<!--css样式-->

/*文字说明*/
.textBox{
    width: 100%;
    height:35px;
    position:absolute; 
    top: 88%;
    left: 15%;
    color: #333;
    letter-spacing: 1px;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    font-size: 13px;
}
.textBox .lineL{
    height: 1px;
    width: 30px;
    background: #C0C0C0;
}
.textBox .lineR{
    height: 1px;
    width: 30px;
    background: #C0C0C0;
}
.text{
    margin: 0 5px;
}
.text b{
    color: #C50013;
    -webkit-text-stroke: 1px #C50013;
    padding: 0 3px;
}