Forms – enable superpowers

As mentioned previously, in the input, there is no way to use :before and :after pseudoelements. But a quick trick to do that, which will be better described in the following sections, is to wrap it in some other elements. It always helps to keep some label and input groups and additionally allows to append the :before and :after pseudoelements.

For example, take the following bare HTML form code:

<form>
    <input type="text" placeholder="Login"/>
    <input type="password" placeholder="Password"/>
</form>

Now you just need to add wrapping elements:

<form>
    <div class="inputKeeper">
        <input type="text" placeholder="Login"/>
    </div>
    <div class="inputKeeper">
        <input type="password" placeholder="Password"/>
    </div>
</form>

Where is the difference? It is easy to see...