DEV Community

Cover image for CSS Pseudo Elements
dagpan
dagpan

Posted on

CSS Pseudo Elements

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

Renders

Alt Text

We are going to add some attributes to the pseudo before element and see how it renders on our page.

Alt Text

Result is

Alt Text

And now let's add an after one also.

Alt Text

Result

Alt Text

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.

Alt Text

That is very interesting, let's check a common real world use.

Alt Text

Renders

Alt Text

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.

Alt Text

Results in this when we hover over the button

Alt Text

And this when we don't

Alt Text

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!

Alt Text

See you next time.

Top comments (2)

Collapse
 
firefighterblu3 profile image
David Ford

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

Collapse
 
meo3w profile image
Phil Hasenkamp

Awesome work!