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

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.

htmlcsspseudo-class


Solution 1:[1]

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:

Solution 2:[2]

You can achieve what you are trying to do by using the :focus-within CSS pseudo-class.

Just wrap your input element in a <div> (or any container element) as shown:

<style>
    #test {
        position: relative;
    }

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

    #mydiv:focus-within::after {
        content: "Careful! This field is case-sensitive!";
    }
</style>

<div id='mydiv'>
    <input id='test' />
</div>

Related:

Solution 3:[3]

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

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

Solution 4:[4]

If you don't need a placeholder, here's a simple cross-browser option. Works also in IE. jsfiddle

Additionally, you can style as you wish.

i[data-hint]::after      {
  /* position: absolute; */
  display: inline-block;
  content: attr(data-hint);
  vertical-align: middle;
  font-style: normal;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition: 0.45s ease-out;
}

input:focus + i[data-hint]::after {
  width: auto;
  opacity: 1;
  margin-left: 10px;
}
<input /><i data-hint="Here my hint for input.."></i>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 David Thomas
Solution 2 Josh Withee
Solution 3 sandeep
Solution 4 Arsen

Related Questions