如何使用CSS实现在标题两边画横线_利用::before和::after伸缩布局-css教程-PHP中文网

标题两侧横线需将标题设为display: flex容器，::before和::after设content: ""、display: block、flex: 1、border-bottom: 1px solid #000，中间文字用包裹，避免width/min-width破坏伸缩性。

如何使用css实现在标题两边画横线_利用::before和::after伸缩布局

标题两侧横线用 `::before` 和 `::after` 怎么写才不溢出

直接用 ::before 和 ::after 加边框，但横线长度不受控、文字换行后错位、Flex 布局下不伸缩——根本原因是没把标题设为 display: flex 容器，且伪元素未正确参与布局流。

核心做法是：让标题元素自身变成 Flex 容器，::before 和 ::after 作为弹性子项，用 flex: 1 占满剩余空间，再通过 border-bottom 绘制横线。

标题标签（如 <h2></h2>）必须设 display: flex; align-items: center;
::before 和 ::after 需设 content: ""、flex: 1、border-bottom: 1px solid #000;
中间文字要用 <span></span> 包裹（否则文字本身会参与 flex 排列，导致间距异常）
避免给伪元素设 width 或 min-width，否则破坏伸缩性

`flex: 1` 在伪元素上为什么有时不生效

因为 ::before 和 ::after 默认是 display: inline，而 flex 属性只对 Flex 子项有效。若父容器是 flex，但伪元素未显式声明 display: block 或 display: flex，部分浏览器（尤其 Safari）会忽略 flex: 1。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须加 display: block 到两个伪元素上（display: flex 也行，但没必要）
不要依赖 visibility: hidden 或 opacity: 0 来“隐藏”伪元素内容——它们仍占布局空间，但可能干扰计算
如果用了 line-height 或 vertical-align，需同步检查伪元素的基线对齐，否则横线和文字不对齐

响应式下横线太短或断裂怎么办

本质是文字变多、容器变窄后，flex: 1 仍强制分配空间，但伪元素最小宽度不足 1px 导致渲染丢失（尤其在 iOS Safari）。这不是 bug，是 CSS 渲染精度限制。

给伪元素加 min-width: 0.5em（不是 0！），确保有基本渲染宽度
避免在小屏上用 font-size: 12px + border-bottom: 2px —— 线条会糊成一块，建议统一用 1px 并靠 transform: scaleY(1.5) 微调粗细
如果标题允许换行，用 white-space: nowrap 锁定单行，否则 flex 容器高度变化会导致横线错位

兼容老浏览器时 `::before`/`::after` 横线不显示

IE10–11 支持 ::before/::after，但不支持对伪元素设置 flex 相关属性；IE9 及以下完全不支持双冒号语法（只认 :before 单冒号）。

如需兼容 IE11，改用单冒号写法：:before 和 :after，并放弃 flex: 1，改用 position: absolute + left/right 定位（但失去伸缩性）
绝对定位方案中，父容器必须设 position: relative，且伪元素需设 top: 50% + transform: translateY(-50%) 对齐中线
真正要兼顾 IE9 的项目，别用伪元素画线，改用背景图或额外 DOM 元素更可控