[css-pseudo] Suggest a pseudo element that wraps all of its content

[Explorer09]

In CSS Pseudo-Elements spec (https://drafts.csswg.org/css-pseudo-4/), I suggest having a pseudo element that merely wraps all of its content into another layer.

I don't know how this pseudo element should be named yet.

This is the use case I recently met.

Example HTML fragment:

<span class="example"><span><span>The quick brown fox<br>
jumps over the lazy dog.<br>
1234567890</span></span></span>

Example CSS:

.example {
    display: block;
    padding: 5px;
    background-color: #ddd;
    text-align: center;
    border-radius: 15px;
}
.example > span {
    display: inline-block;
    padding: 5px;
    background-color: #eee;
    text-align: left;
    line-height: 1.5;
    border-radius: 10px;
}
.example > span > span {
    display: inline;
    background-color: #fff;
    border-radius: 5px;
}

(Simplified example)

.example2 {
    display: block;
    text-align: center;
}
.example2 > span {
    display: inline-block;
    text-align: left;
    line-height: 1.5;
}
.example2 > span > span {
    display: inline;
    background-color: #eee;
    border-radius: 5px;
}

The text has line breaks (<br>), and I wish to make the text left-aligned while making the entire block aligned at the center. The text would also have inline background color.

For such styling, I need to wrap at least two layers of <span> within the outer <span> that has class specified. The inner <span> are only there to make CSS styling work.

What if, I have no control on the HTML and have just one layer of <span> to apply the style on?

<span class="example">The quick brown fox<br>
jumps over the lazy dog.<br>
1234567890</span>

That's the use case for the pseudo element.

[Loirooriol]

Seems a duplicate of #2406, with nesting

.example {
  display: block;
  padding: 5px;
  background-color: #ddd;
  border-radius: 15px;
}
.example::content {
  display: block;
  justify-self: center;
  padding: 5px;
  background-color: #eee;
  text-align: left;
  line-height: 1.5;
  border-radius: 10px;
}
.example::content::content {
  display: inline;
  background-color: #fff;
  border-radius: 5px;
}