Cool things you can do with ::before and ::after
Published: 2021-07-08 05:49:13


It's nice to know about the pseudo-elements `::before` and `::after`, because there's a whole lot of styling you can do with them. The main advantage of these pseudo-elements is that they are already existing children of the elements you want to style, so you don't have to introduce any more element into the DOM, keeping your HTML cleaner. So, instead of
```html
<div class="element">
  <div class="inner"></div>
  Actual content of this element
</div>

<style>
  .inner {
      /* something */
  }
</style>
```
You can do this -
```html
<div class="element">
  Actual content of this element
</div>

<style>
  .element::before {
      /* something */
  }
</style>
```
Both of these behave according to the box model of CSS when styled, and can be moved around inside their parent (or outside) using the `position` attribute and by setting the `left`, `right`, `top`, or `bottom` values. They can have their own `width`, `height`, and `background` too.

Armed with that knowledge, let us see examples of some neat styling features that you can achieve with them. I'm not going to explain too much, everything is in its own CodeSandbox, feel free to launch them and explore the code. If you have questions feel free to ask in the comments.

>`::before` and `::after` must have content, so remember to set content to "" wherever applicable. To learn why they must have some content in them, check out [css - Why do the :before and :after pseudo-elements require a 'content' property? - Stack Overflow](https://stackoverflow.com/questions/17067918/why-do-the-before-and-after-pseudo-elements-require-a-content-property)

## 1. Custom bulleted list
This one is probably the simplest of this lot. The idea is to turn off the default bullets of the list with `list-style-type: none` and insert your own content via the `::before` pseudo-element. While you can achieve a similar effect with the traditional `list-style-image` approach, this method allows you use any of your favorite Unicode characters as bullet, and also allows you to style them independently.

{% codesandbox musing-margulis-ubibe %}

## 2. Info/Question/Success/Error etc. Icon
Similar to the above approach, here we're using that technique to render meaningful icons in alert boxes. Suppose you have a box that displays some information. Another that displays a warning message, and something else that asks a question. You can just provide your `div`s with the respective CSS classes and let `::before` do the rest.

{% codesandbox morning-breeze-yk6le %}

>Btw, this is also an example where the `content` property of the pseudo-element is set to a URL, instead of text like in the earlier example.

## 3. A folded, wrapped-around effect
The trick here is to use the pseudo-element to display like the "wrapped-around" bit. For this (I learned this on [CSS Tricks: The Shapes of CSS](https://css-tricks.com/the-shapes-of-css/)), we make its width zero, but also make it take up space with borders. The top and right borders are visible, while the remaining two are transparent, effectively rendering them invisible.

{% codesandbox boring-diffie-jftte %}

## 4. Gradient border
Here, we're styling the `::before` element to slightly outsize its parent (while also sending it behind it), and giving it a gradient for a background, so the parent element with the actual content stays on top of it, and the largely hidden pseudo-element has only a few pixels from each side peeking out, giving the impression of a border.

{% codesandbox cool-mcnulty-hoo0t %}

## 5. Corner borders
Honest confession: I saw this on a news website somewhere, loved it aaaaaaand, um, pressed F12 and stole the code. To be fair, they had done it with extra `div`s which I then converted to pseudo-element code, so I kind of improved upon it I guess? The principle is the same as above, but we use both `::before` and `::after` in this case.

{% codesandbox happy-beaver-tufvi %}

## 6. Transition effect on hover
Suppose you have a button with a `linear-gradient` as a background. Now, there's a difference between how CSS treats a gradient and a color. Colors are just seen as solid colors, while gradients are actually rendered as if they were background images. Which means that normally, you wouldn't be able to add any kind of `transition` to the background. That doesn't mean you cannot achieve a similar effect, though. In the example below, I have styled the `::before` pseudo-element to expand on hover with a transition. Because it's translucent and overlaid on top of the parent, you can see a subtle but smooth transition animation when you hover over the button.

{% codesandbox jolly-babbage-ql2t1 %}

That's all I can think of right now. What else do you think we can achieve with these pseudo-elements? Let me know in the comments.