The Beginner's guide to CSS Illustrations - Part 2
Tags: html, css, webdev, tutorial
Published: 2020-12-19 11:18:56

# **Part 2 - Keeping things clean**
Welcome back to the second and final part of this series. I hope you have mastered the art of drawing simple shapes with CSS. Have you tried creating some beautiful objects by combining the shapes? If yes, put the link to your CodePen or JSFiddle in the comments and share it with others. If you haven't, I would recommend you to first try drawing objects like clouds, a smiley, flowers, a simple car, ice cream, etc. Try to add as much detail as you can. Draw anything you like.

### Pseudo-elements

One thing you will notice is that your **html contains too many divs**. This can make it look untidy. Also, with so many divs, at some point, you may face issues with positioning. To solve this problem and clean up the code, we have **pseudo-elements**, `::before` and `::after`. According to [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements),
> A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

If you have come across them somewhere, you might have noticed that, in many places, a *single* colon (`:`) is used instead *two* (`::`). As for now, you can use any rule. The two-colon syntax was introduced in CSS3 to distinguish between **pseudo-elements** and **pseudo-classes** (*eg.* `:hover`). Since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements. Now, let's see how it can clean our code.

Let us draw a nice smiley. To begin with, I will first create its face.

```html
<div class="face"></div>
```
```css
body {
  background: #FFECB3;
}

.face {
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background: #FFDB57;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wcliiomkoyaoivdp5hp8.png)

Next, I will add the eyes. The divs defining the eyes must be inside the `.face` div, and, they should have an **absolute** positioning. I want the shape of the eyes to be elliptical. I guess you know how to draw an ellipse. So, now your HTML should look like this.

```html
<div class="face">
  <div class="eye-grp">
    <div class="eye left"></div>
    <div class="eye right"></div>
  </div>
</div>
```
I have given the class `eye` to both the eyes since they should be identical. We can just add the styles to the `eye` class. Otherwise, we would have to copy the styles of one eye to the other. So the CSS should be

```css
body {
  background: #FFECB3;
}

.face {
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background: #FFDB57;
}

.eye {
  position: absolute;
  height: 40px;
  width: 30px;
  background: #191F45;
  border-radius: 50%;
  top: 70px;
}

.left {
  left: 60px;
}

.right {
  right: 60px;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/srrukjlwi7008w8r3z3c.png)

Now we have to draw the mouth. So, a smiling mouth should be a semi-circle. I hope, by now, you can draw semi-circle easily. Make sure that the `mouth` div is a sibling of `eye-grp`.

```html
<div class="mouth"></div>
```
```css
.mouth {
  width: 120px;
  height: 60px;
  border-radius: 5px 5px 60px 60px;
  background: #191F45;
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c38x6ioz3v47xv4x7urq.png)

That's a cute smiley😀, isn't it? Let us add some more details. First, I will add the pupils. So, create a div having class `pupil` inside both `left` and `right` divs.

```html
<div class="eye left">
  <div class="pupil"></div>
</div>
<div class="eye right">
  <div class="pupil"></div>
</div>
```
```css
.pupil {
  height: 20px;
  width: 15px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 4px;
  top: 4px;
}
```

Now, I will add a tongue. The tongue should be another semi-circle, but flipped horizontally (with respect to the mouth). Before you create the tongue, few more rules should be added to `mouth` div.

```css
.mouth {
  overflow: hidden
  border: 5px solid #191F45;
  box-sizing: border-box;
}
```
The overflowing parts of the tongue should be hidden, and I added the border to create a narrow gap between the tongue and the border of the mouth. Now add the `tongue` div inside `mouth` and then add the CSS rules.

```html
<div class="mouth">
  <div class="tongue"></div>
</div>
```
```css
.tongue {
  width: 100px;
  height: 50px;
  background: #EE6055;
  border-radius: 50px 50px 0 0;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}
```

A little shadow on the face won't do any harm.

```css
.face {
  box-shadow: inset -10px -10px 0 0 #ffcb05;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/whkv6vfcfz2x245an7p0.png)

Even more beautiful!

Let us look at the html once.
```html
<div class="face">
  <div class="eye-grp">
    <div class="eye left">
      <div class="pupil"></div>
    </div>
    <div class="eye right">
      <div class="pupil"></div>
    </div>
  </div>
  <div class="mouth">
    <div class="tongue"></div>
  </div>
</div>
```
Even though our smiley seems to be happy, our code does not. There are too many divs. Let us clean it up. So, I will now bring the pseudo-elements in the battlefield.

I will begin with removing the `tongue` div and replacing the CSS with `.mouth::after`.

```html
<div class="face">
  <div class="eye-grp">
    <div class="eye left">
      <div class="pupil"></div>
    </div>
    <div class="eye right">
      <div class="pupil"></div>
    </div>
  </div>
  <div class="mouth"></div>
</div>
```
```css
.mouth::after {
  content: "";  /* Important */
  width: 100px;
  height: 50px;
  background: #EE6055;
  border-radius: 50px 50px 0 0;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}
```
> *Note: When using pseudo-elements, we must add the* **`content`** *property. Otherwise, it won't produce any effects. Whatever you put within the quotes will be shown on the screen. Since we don't want any text here, we can leave it blank.*

Next, I will remove the `pupil` classes and replace them with `eye::after` in CSS.

```html
<div class="face">
  <div class="eye-grp">
    <div class="eye left"></div>
    <div class="eye right"></div>
  </div>
  <div class="mouth"></div>
</div>
```
```css
.eye::after {
  content: "";
  height: 20px;
  width: 15px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 4px;
  top: 4px;
}
```
The HTML is much happier now, just like our smiley! I hope this post helped you understand how pseudo-elements are used in CSS and how we can use them to reduce unnecessary elements in HTML. Stay safe, keep coding, and never stop learning!😎

{% codepen https://codepen.io/dasshounak/pen/ExgXvNR %}
***Play with my*** 😀 ***on [codepen](https://codepen.io/dasshounak/pen/ExgXvNR).***