Is it possible to style anonymous flex items explicitly?

Question

I'm in the early stages of grasping the basic flexbox concepts. The Using CSS Flexible Boxes article at MDN states (emphasis mine):

Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.

That means that the following mark-up automatically provides three items to play with:

p, em {
  margin: 1em;
  padding: 1em;
}
p {
  border: 1px solid blue;
  display: flex;
  justify-content: space-between;
  
}
em {
  border: 1px solid orange;
  display: inline-flex;
}

<p>This is a <em>just</em> a test.</p>

However, I'm still unsure about the possibilities of these anonymous items outside flexbox model itself (if any). It's awesome not to need to wrap "This is a" and "a test" in bogus <span> tags for layout but, is there a way to apply regular styles to them? A pseudo-element or something similar? Could I, for instance, set a different colour to each one of the three parts the paragraph is divided into?

Answer 1

No. Anonymous boxes cannot be directly targeted for CSS styling. CSS styles need a "hook" in the HTML to attach to. That hook is an HTML tag. Without the tag, CSS has nothing to target. This concept applies across box models, including flex and block formatting contexts.

---

More about anonymous boxes:

From the CSS spec:

9.2.2.1 Anonymous inline boxes

Any text that is directly contained inside a block container element must be treated as an anonymous inline element.

The flexbox specification provides for similar behavior.

4. Flex Items

Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.