Can I use multiple pseudo selectors focus with before/after on the same element?

Question

I'm trying to combine using pseudo selectors with pseudo elements to create a custom tooltip.

My HTML:

<input id='test'/>

My CSS:

#test {
    position: relative;
}

#test:focus {
    background-color: #08c;
}

#test:focus:before {
    position: absolute;
    left: 100%;
    width: 10px;
    height: 10px;
    background-color: black;
}

A fiddle running the code: http://jsfiddle.net/9ujEH/

Currently the input will change to blue when focused as a result of #test:focus but the black sqaure doesn't show up like I thought it would from #test:focus:before.

Answer 1

Pseudo elements can only be defined on container elements. Because of the way they are rendered within the container itself as a DOM element. inputs cannot contain other elements hence they're not supported. A button on the other hand, although a form element, supports them because it's a container of other sub elements.

More from the 2.1 spec

The ::after and ::before pseudo-elements are now using the double-colon to avoid confusion with pseudo-classes (which obviously use :), although older version of IE (7,8) won't recognize the double colons .. keep that in mind if your trying to support them.

Answer 2

This doesn't work because input, like img, elements are void/replaced elements, and have no 'content' to speak of, therefore it seems there's no place for the pseudo-elements to be inserted within the elements.

Using a div, for example, you can use multiple psuedo-selectors, such as:

div:hover::before {
    /* CSS */
}

JS Fiddle proof-of-concept.

References:

• Replaced Elements, from MDN.