CSS :: before properties

Hello,
I have a problem with pseudo-classes, I am trying to style a button but: :before properties are not being applied for some reason.
thank you for your help . Here is the pen : https://codepen.io/malekhammou/full/MLXmbP

I was trying to play around with your code. Still I am not sure what is happening. The ::before psuedo-element seems to not work for the < input > elements however when tried for div elements, it did work.
Check out the following stackoverflow link for further understanding:

2 Likes

Good answer, @sabahat70. The gist of the SO answer (at least the acceptable one) is that ::before only works in container elements, i.e. ones that can have child elements. If your element can have a closing tag, i.e. <foo></foo>, it’s a container. Since <input> has no closing tag, it’s not a container, and doesn’t work with ::before (or ::after, naturally). There are a few browsers in which these pseudoclasses work on certain non-container elements, but you can never count on that working across browsers, including modern ones.

The workaround is simple: just enclose your input element in a <span> and style that.

2 Likes

Thank you very much! clear answers

Thank you @chuckadams! Your answer helped clear my doubts.