如何用纯CSS实现自适应文字内容的分割线?

有以下DOM结构:

<h1>
    <span>
        <span>
            文字内容        </span>
    </span></h1>h1{    width:100%;    padding:20px;
}

要求:不能改变DOM结构,不能改变h1的已有样式;

实现: ---------- 文字内容 ----------- (左右两侧padding + 左右分割线宽度 + 文字内容宽度 = h1宽度)

  1. 左右侧分割线自动适应h1文字内容以外的剩余空间,文字内容变化,分割线也应根据文字内容变长或缩短;

  2. 文字只占一行;

除了用span背景遮住h1伪类分割线,还有其他方法吗?

关键是这个自适应很难搞。


侃侃尔雅
浏览 1013回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript