Let's talk about …
Pseudo Elements
CSS Pseudo Elements is a versatile tool that delivers dynamic and powerful results without the need for JavaScript code.
Let me introduce you to the before and after tags.
::before ::after
These two tags allow you to incorporate a pseudo html element either before or after an html element in your code.
Three things to note about these two tags.
a. Before CSS3 there was only one semicolon used when writing before or after tags. You might see it like this,
:before :after
After CSS3 specifications were introduced and became standard, it was decided to use two semicolons with before and after.
b. You can only add a before and/or after tag to an element that has content, because the before and after pseudo elements attach themselves to the content of an element.
c. You can only add one before and one after pseudo elements to an element on your page.
Let's see the tags in action. Here we have our simple page with a label "Name", a text input field and a submit button.
Renders
We are going to add some attributes to the pseudo before element and see how it renders on our page.
Result is
And now let's add an after one also.
Result
So as we can see at the examples above, it seems that there was a pseudo element added before and after the label element. In actuality that happened to the content of the label element with class name "required" we selected.
That is very interesting, let's check a common real world use.
Renders
So here we selected the "required" class name element, our "Name" label, to add a pseudo element with content "*" after it's content, "Name". This is a way to display the required field asterisk when filling a form, without the need for JavaScript code.
Results in this when we hover over the button
And this when we don't
Here we are making the position of the data-tooltip attr element relative and we are adding a pseudo element, displayed on hover only, after it's content "Submit Form", with content the attr data-tooltip's data "Tooltip". Also make it's position absolute relatively to the relative position of the button, place it underneath, separate with a small margin and have it be light grey. And we get this dynamic effect on our page without writing any extra code.
Although a 'pseudo' tool, it has very real and useful results!
I apologize for the above line, it was a failed attempt at a pseudo joke!
That's all for today folks,
Thank you!
See you next time.
Latest comments (2)
hey there and thanks for the write up! just a little note, : is a colon and ; is a semicolon. your article uses the term semicolon when describing these pseudo elements
Awesome work!