W3C home > Mailing lists > Public > www-style@w3.org > January 2009

[selectors] [css3-content] The ::inside pseudo-element

From: Giovanni Campagna <scampa.giovanni@gmail.com>
Date: Tue, 20 Jan 2009 18:38:24 +0100
Message-ID: <65307430901200938l6d3ec299r32e1a544d7ef1eeb@mail.gmail.com>
To: www-style@w3.org

One of the features I like most in Microsoft Excel is the ability to align a
currency symbol on the left, while styling the value on the right. Few days
ago I wanted to reproduce this behaviour in a HTML table and I found a
problem: CSS supports only one alignment per box. So I thought: I'll put the
box with currency before the table-cell, that is:
td::before {
    text-align: left;
    content: attr(my|currency,string);
td {
    text-align: ",";
    display:table-cell; /* from UA defaults */
but this approch has a limit: it introduces a new table cell, that moves all
subsequent cells on the rigth, destroying the whole layout. What I need is
content before cell content, not before cell box itself.

*A clean solution: the ::inside pseudoelement*:

The ::inline pseudo-element represent the content of its superior parent,
instead of representing the superior parent itself.
Pseudo-elements attached to ::inside will be relative to the anonymous box
that contains superior parent's content, so they will be part of ::inside's
superior parent's box.
so td matches the table-cell boxes, td::inside matches the anonymous line
box containing "55,87" and td::inside::before will match an anonymous line
box (since boxes created with ::after and ::before inherit display from
their superior parent, instead of having display:inline by default) inside
the table cell box.
Alternative solutions*

- if you think that ::inside is useful only togheter with ::after and
::before, you can put ::after-content and ::before-content: this reduces
complexity but limits the possibility to style ::inside boxes:
use case for direct styling to ::inside:
element {
Received on Tuesday, 20 January 2009 17:40:51 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:23 UTC