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

*Preamble*:

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