Changer l’apparence de ses labels en version mobile

Petite astuce css toute bete, ici on va voir comment modifier les labels de ses formulaires simplement grace au css et pseudo élement: on a ici deux apparences, mobile ou desktop , d’un meme formulaire.Grace au css on change l’apparence du formulaire en fonction du device utilisé.Comme on le voit sur l’image, le label « ET » devient « & » en version mobile.

C’est tout simple, il suffit de cacher le label avec un display:none, ou visibility hidden plutot, et de remplacer cet espace vide par un autre terme grace au pseudo element « before » ou « after »:

ul#contact > li:nth-child(3) form li:nth-child(2) label:nth-child(3){visibility:hidden}

ul#contact > li:nth-child(3) form li:nth-child(2) label:nth-child(3):before{content:'&';width:20px;padding-top: 6px;display:block;height:auto;font-size: 1.5em;visibility: visible;}