Creative CSS3 Selectors

Background

My musings also serve as a semi-wiki. Not serious enough for me to maintain a serious editing history system, but certainly serious enough to warrant lots of use of the ins and del tags, both of which support the datetime attribute. However, no browser I know of provides a useful way of using this.

Initially I thought of doing a quick and simple js script that went through each ins and del and cloned the datetime attr as a title, retaining the machine readability but allowing humans to see the values as well.

But inspired by the utterly awesome print styling of HTML5 boilerplate (It's not often talked about, but I consider it to be one of the absolute best parts of h5bp) I decided to get creative with CSS3, and came up with this:

/* Gimmicky ins/del markers */
ins { background: #ff9; color: #000; text-decoration: none; }
del {
    opacity: 0.5;
    overflow: hidden;
    width: 3em;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
del:hover { opacity: 1; background: #9ff; text-decoration: none; width: auto; }
del:hover:before { content: "Was \; }
del:not([datetime]):hover:after { content: " "; }
del[datetime]:hover:after { content: " on " attr(datetime) " "; }

Added CSS del truncation as per Tantek Çelik’s suggestions

(Note that del tags are automatically struck through)

It's simple enough, but here's a demo:

This is some stuff I decided should be different. This is whatever I decided it should be.

Hover over the del in any browser that supports CSS3 selectors and try to decide whether it's awesome or an abomination. I haven't managed yet.