如何仅用伪元素绘制段落双线下划线且不使用display:block？

没问题，我来帮你搞定这个需求！要在不使用display: block的前提下，用伪元素给段落添加底部双线，我们可以改用display: inline-block来实现——它既能保留行内元素的特性（不会强制独占一行），又支持设置宽、高、外边距等块级属性，完美替代block的作用。

修改后的CSS代码 #

p:after {
  content: "";
  display: inline-block; /* 替换原来的block */
  width: 40px;
  margin: 20px auto 0;
  border-bottom: 1px solid;
  border-top: 1px solid;
  height: 7px;
}

完整示例代码 #

<h1>The box-sizing Property</h1>
<p>Defines how the width and height of an element are calculated: should they include padding and borders, or not.</p>
<h2>box-sizing: content-box (default):</h2>
<p>Width and height only apply to the content of the element:</p>
<div id="example1">This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!</div>
<h2>box-sizing: border-box:</h2>
<p>Width and height apply to all parts of the element: content, padding and borders:</p>
<div id="example2">Here, the full width is 300px, no matter what!</div>

<style>
p:after {
  content: "";
  display: inline-block;
  width: 40px;
  margin: 20px auto 0;
  border-bottom: 1px solid;
  border-top: 1px solid;
  height: 7px;
}
</style>

效果说明 #

• inline-block让伪元素可以被margin: 20px auto 0居中对齐，同时不会像block那样强制换行撑满父容器宽度
• height:7px给两条边框之间留出了空隙，形成双线效果
• 其他属性保持你原来的设置，确保样式和预期一致

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