Two CSS challenges

Here are two challenges that have no solutions in modern CSS.

1. Consider this simple markup:

<p> Something <span>Like a Button</span></p>

I would like to define the span above to behave (visually) as a button - on
span:active I would like to shift/offset its text from its normal position
by 1px. Here is its style:

span {
   display:inline-block;
   border:1px solid;
   padding:3px;
   vertical-align:baseline;
}
span:active { ???? }

Straightforward solution of using something like padding:4px 2px 2px 4px;
will not work here because of vertical-align:baseline ...

2. Consider another markup:

<div>
    text 1
    <p>text 2</p>
</div>

By definition [1] "text 1" is wrapped into so called anonymous box -
block element of appropriate type. If I want to draw 1px solid red;
border around that box how would I do so?

...

I suspect that both cases above can be solved if CSS would have ::text
pseudo-element that will match such anonymous text boxes.

In this case solution for case #1 will look like:

span:active::text { position:relative; top:1px; left:1px; }

The ::text is a direct analogy of other pseudo-elements like
::first-letter and ::first-line and matches any
anonymous (synthetic) children of the element.

Happy Holidays.

[1] http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level

-- 
Andrew Fedoniouk

Terra Informatica Software, Inc.

Received on Saturday, 25 December 2010 20:31:35 UTC