Can I use multiple tricks of pseudo selectors with before / after the same element?

Question

I am 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; } 

Violin with code: http://jsfiddle.net/9ujEH/

Currently, the input changes to blue if focused as a result of #test: focus, but the black sqaure is not displayed, as I thought it would be from #test: focus: before.

Answer 1

Pseudo-elements can only be defined for container elements. Because of how they appear in the container itself as a DOM element. Inputs cannot contain other elements, so they are not supported. A button, on the other hand, although the form element supports them, because it is a container of other sub-elements.

More from specification 2.1

The pseudo-elements ::after and ::before now use a double colon to avoid confusion with pseudo-classes (which obviously use : , although an older version of IE (7.8) will not recognize double colons. Keep this in mind if you are trying to support them.

Answer 2

: after and : until the element does not work, the input element is replaced .

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

Answer 3

This does not work, because input , like img , elements are void / replace elements and do not have “content” to speak, so there seems to be no place for pseudo-elements to be inserted inside the elements.

Using a div , for example, you can use several pseudo selectors, for example:

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

JS Fiddle proof of concept .

Literature:

• Replaced items, from MDN .