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

问题描述

问 题

有以下DOM结构：

<h1>
    <span>
        <span>
            文字内容
        </span>
    </span>
</h1>

h1{
    width:100%;
    padding:20px;
}

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

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

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

2. 文字只占一行；

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

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

解决方案

用flex吧
https://jsfiddle.net/opym5zd6/

这篇关于javascript - 如何用纯CSS实现自适应文字内容的分割线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！