[csswg-drafts] [css-pseudo] Suggest a pseudo element that wraps all of its content (#11312)

Explorer09 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-pseudo] Suggest a pseudo element that wraps all of its content  ==
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:

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

Example CSS:

```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)
```css
.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?

```html
<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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11312 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 2 December 2024 22:20:24 UTC