CSS Pseudo Elements
Published: 2020-10-14 18:29:49

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lwiueih6xyrclbfvlvlc.JPG)

Renders

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8612lnrwm60bigdk6la7.JPG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xrah0dx63z39crle19l3.JPG)

Result is

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w8welxwjx59lbssftxh6.JPG)

  And now let's add an after one also.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vuzj6la5du19csuo1i83.JPG)

Result

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cgborsdujb60virm6dvi.JPG)

  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](https://dev-to-uploads.s3.amazonaws.com/i/f6wnjawja72soxhzvv61.JPG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i5ksk7qibv19c5p269ys.JPG)

Renders

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2070yu5ntqoz9qgkneio.JPG)

  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](https://dev-to-uploads.s3.amazonaws.com/i/y8l8rnhk80562o8bcgr7.JPG)

Results in this when we hover over the button

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z83lg4dkdzonkzlccstt.JPG)

And this when we don't

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vi2myiu503qld1d1l4n9.JPG)

 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](https://dev-to-uploads.s3.amazonaws.com/i/swhe2lcsdmc31arpaiuz.jpg)

See you next time.