CSS伪元素_after高度设置引发元素展开问题求助

针对你遇到的问题，可通过以下调整解决：

1. 移除伪元素的内容，消除线条根源 #

你当前设置了content: '"-"'，即便color: transparent，这个文本节点仍可能是导致上方线条显示的原因。直接将content改为空字符串，彻底移除这个内容：

_after: {
  width: 'full',
  top: '49%',
  left: '50%',
  // 移除height属性，避免撑开元素
  // height: { base: '90%', sm: '133%' },
  content: '', // 替换原有的"-"内容
  position: 'absolute',
  color: 'transparent',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: 'center',
  transform: 'translate(-50%, -50%)',
  webkitTransform: 'translate(-50%, -50%)'
},

2. 确保父元素设置相对定位，避免布局偏移 #

绝对定位的伪元素需要以父元素为定位基准，否则可能脱离预期布局导致元素异常撑开。给伪元素的父元素添加：

position: relative;

3. 彻底清除不必要的样式（可选） #

如果不需要伪元素的背景或高度相关样式，可直接删除冗余属性，进一步简化代码：

_after: {
  content: '',
  position: 'absolute',
  top: '49%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  webkitTransform: 'translate(-50%, -50%)'
},

内容的提问来源于stack exchange，提问作者Alperen Kapusuz