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

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.

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.

:after & :before is not working on replaced element & input is an replaced element.

Check this http://reference.sitepoint.com/css/replacedelements