[Webkit-unassigned] [Bug 276304] ::before ist more a piece of “::behind”

Mon Jul 8 13:49:43 PDT 2024

https://bugs.webkit.org/show_bug.cgi?id=276304

--- Comment #2 from stevestasteislost at icloud.com ---
Ooops! While hunting another bug (FYI: https://developer.apple.com/forums/thread/745708) I missed “the meaning of relative/absolute” … Sorry for that!

Of course you want to see “the real fun”? Here ist some of it:

<head>
        <style>
                * {
                        box-sizing: border-box;
                        margin: 0;
                        padding: 0;
                }
                body {
                        /*      max-block-size: 90vb !important;        LOL: MAX!       */
                        display: grid;
                        grid-template:
                                "h h h" 10vb    /*      10 +    …               */
                                "m m a" 80vb    /*      80 +    …               */
                                "m m a" 10vb    /*      10      >       100!    */
                        / 20vi auto 20vi;
                        gap: 0.25lh 0.5ch;
                        header {
                                grid-area: h;
                                inline-size: 100%;
                                block-size: 100%;
                                background-color: lime;
                        }
                        main {
                                grid-area: m;
                                background-color: rgb(from yellow r g b / 0.25);
                        }
                        aside {
                                grid-area: a;
                                inline-size: 100%;
                                block-size: 100%;
                                display: inline-flex;
                                background-color: ivory;
                        }
                        counter-reset: total;   /*      LOL! What a joke! Counters!     */
                }
                ul {
                        display: inline;
                        color: white;
                        background-color: rgb(from black r g b / 0.8);
                        & > ul { background-color: rgb(from white r g b / 0.8); }
                        flex-flow: column;
                        li {
                                display: inline flex;
                                font-size: 2rem;
                                list-style-type: none;
                                &[alt]::before {
                                        content: attr(alt) ":"; color: red;
                                }
                                &::after {
                                        content: "[" counters(total, "①") ":" counters(subcount, "②") "]";
                                        color: cyan; padding-inline: 0.5ch; font-size: 1rem;
                                }
                                &:not(:last-child)::after { /* nice: doesn’t disturb the above! */
                                        content: ", "; font-size: revert;
                                        color: lime;
                                }
                                counter-increment: total, subcount;
                        }
                        counter-reset: subcount;
                }
        </style>
</head>
<body>
        <header>Showtime!</header>
        <main>Main thing.</main>
        <aside>
                <ul>
                        <li>L. 1</li>
                        <li alt="α">L. 2</li>
                        <li>
                                <ul>
                                        <li>L. 3</li>
                                        <li alt="β">L. 4</li>
                                </ul>
                        </li>
                        <li>L. 5</li>
                </ul>
        </aside>
</body>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240708/5d65abe3/attachment-0001.htm>