css实现左右横线中间文字效果

最新推荐文章于 2022-04-22 15:18:17 发布

风轻云断

最新推荐文章于 2022-04-22 15:18:17 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习实用文章标签： css

本文链接：https://blog.youkuaiyun.com/A156348933/article/details/79579563

实用同时被 2 个专栏收录

51 篇文章

订阅专栏

学习

48 篇文章

订阅专栏

本文介绍如何使用CSS实现一种布局，其中文字居中显示在两条横线之间。通过设置适当的边框和内边距，可以创建出这种视觉效果。

样式

.title {
    display: table;
    width: 100%;
    line-height: 32px;
    background-color: #fff;
    white-space: nowrap;
    border-spacing: .2rem 0;
}

.title:before,
.title:after {
    display: table-cell;
    content: '';
    width: 50%;
    background: -webkit-linear-gradient(#eee, #eee) repeat-x left center;
    background: linear-gradient(#eee, #eee) repeat-x left center;
    background-size: 0.1rem 0.1rem;
}