I have a paragraph with some text, a possible span, and some :before and :after psueodo-content:

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

I would like to pace the pseudo-content at the very beginning and end of the paragraph:

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

I though a simple grid with grid-template-columns would do it, but everything I try gets confused with the additional span element.

How can I get this effect? Should I be using flex instead?

Here is a sample snippet:

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>