如何用CSS Grid或Flex实现带span的段落首尾伪元素布局？

需要为包含普通文本或<span>元素的<p>标签添加:before和:after伪元素，让伪内容分别显示在段落最开头和最末尾，实现如下排版效果：

« Normal content without a span »
« Additional content with a [span] »

尝试用CSS Grid的grid-template-columns实现时，<span>元素导致布局混乱，询问如何实现该效果，是否应该改用Flex布局？

相关代码片段：

p {
  display: grid;
  width: 40em;
  grid-template-columns: 2rem ? ? 2rem;
  span {
    border: thin solid #ccc;
    padding: 0 0.25rem;
  }
  &:before {
    content: "«";
  }
  &:after {
    content: "»";
  }
}

<p>Normal content without a span</p>
<p>Additional content with a <span>span</span></p>

改用Flex布局是更合适的选择——Grid布局会将段落内的<span>识别为独立网格项，从而打乱整体排版；而Flex可以轻松实现这种两端固定、中间内容自适应的结构，且不影响<span>的正常文本流。

实现代码 #

p {
  display: flex;
  align-items: center;
  width: 40em;
  
  span {
    border: thin solid #ccc;
    padding: 0 0.25rem;
  }

  &:before {
    content: "«";
    width: 2rem;
    padding-right: 0.5rem; /* 控制引号与文本的间距 */
  }

  &:after {
    content: "»";
    width: 2rem;
    text-align: right;
    padding-left: 0.5rem; /* 控制引号与文本的间距 */
  }
}

原理说明 #

1. 将<p>设置为flex容器，align-items: center保证内容垂直居中；
2. 固定:before和:after的宽度，通过内边距控制与文本的间距；
3. 段落内的文本（包括<span>）会自动占据剩余空间，:after伪元素会被Flex布局推到容器最右侧，完美匹配需求效果。

备选Grid方案（不推荐） #

如果一定要用Grid，需要将段落内的所有文本（含<span>）包裹在一个统一容器中，避免<span>被识别为独立网格项：

<p><span class="content">Normal content without a span</span></p>
<p><span class="content">Additional content with a <span>span</span></span></p>

p {
  display: grid;
  width: 40em;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;

  .content {
    span {
      border: thin solid #ccc;
      padding: 0 0.25rem;
    }
  }

  &:before {
    content: "«";
    padding-right: 0.5rem;
  }

  &:after {
    content: "»";
    text-align: right;
    padding-left: 0.5rem;
  }
}

这种写法可行，但比Flex方案繁琐，因此更推荐使用Flex布局。

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