How to Change Look & Feel of Pseudo Elements using JavaScript and CSS Custom Properties
Tags: javascript, css, dom, generalprogramming
Published: 2021-02-06 10:07:38

---
title: How to Change Look & Feel of Pseudo Elements using JavaScript and CSS Custom Properties
published: true
description: Changing the UI of  pseudo elements through JavaScript can become difficult sometimes. Let's see how we can make it easy with help from CSS Custom Properties.
tags: javascript, css, dom, generalprogramming
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/74ktsolnv8j6nqtril3i.png
canonical_url: https://blog.shhdharmen.me/how-to-change-look-and-feel-of-pseudo-elements-using-javascript-and-css-custom-properties
---

Changing the UI of  pseudo elements through JavaScript can become difficult sometimes. Let's see how we can make it easy with help from CSS Custom Properties.

## The Problem

In general, if we want to change anything in [pseudo elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) through JavaScript, we do it in the following way:

1. Create CSS classes on element, which will change pseudo elements' UI
2. Get the element using [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
3. Modify the classes using [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) 

Above approach works fine. But, if we need more customizations in pseudo elements, we will end-up creating many classes to handle all scenarios.

## CSS Custom Properties to the rescue

> **Custom properties** (sometimes referred to as **CSS variables** or **cascading variables**) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., `--main-color: black;`) and are accessed using the `var()` function (e.g., `color: var(--main-color);`). - [Source](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

Let's take an example to see it in action.

### Initial Markup

1. Create HTML for checkmark

```html
<span class="checkmark"></span>
```

2. CSS for `.checkmark`

```css
.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #61d345;
  position: relative;
  transform: rotate(45deg);
}
.checkmark::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-color: #fff;
  bottom: 6px;
  left: 6px;
  height: 10px;
  width: 6px;
}
```

After above, the result will look like below:

![checkmark](https://cdn.hashnode.com/res/hashnode/image/upload/v1612595182111/qDeiAb7Ub.png)

Great, checkmark looks neat... 😅

### Usage of CSS Custom Properties

Now, let's assume that in your website you want to allow users to change colors of this checkmark as they need on runtime. Let's see how we can change colors of element and its pseudo element with CSS Custom Properties.

Change colors in CSS like this:

```css
.checkmark {
  /* rest remains same */
  background: var(--check-primary);
}
.checkmark::after {
  /* rest remains same */
  border-color: var(--check-secondary);
}
```

> 👉 **Note:** Custom property names are case sensitive — `--my-color` will be treated as a separate custom property to `--My-color`.

Now, from your JavaScript, you would do like below to update the colors:

```javascript
// 1. Get the element
const element = document.querySelector(".checkmark");

function changeColor() {
  // 2. Modify its custom css properties
  element.style.setProperty("--check-primary", "#607d8b");
  element.style.setProperty("--check-secondary", "#303030");
}

```

Cool! Now whenever you call `changeColor`, it will update the colors. And it will look like below:

![checkmark with changed colors](https://cdn.hashnode.com/res/hashnode/image/upload/v1612596145663/OHLv1-6X9.png)

But wait, there is still one more problem. After updating the CSS, when you initially render it, it looks like below:

![initial checkmark after updating css](https://cdn.hashnode.com/res/hashnode/image/upload/v1612596279873/Lfm8hiowO.png)

The reason it happened is we used CSS variables to assign colors, but those variables don't have any initial values.

We can solve this in 2 ways:

1st - Initialize variables with class or [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root).

```css
:root {
  --check-primary: #61d345;
  --check-secondary: #fff;
}

// or

.checkmark {
  --check-primary: #61d345;
  --check-secondary: #fff;
}
```

2nd - Give [fallback value](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values) in `var()` function:

```css
.checkmark {
  background: var(--check-primary, #61d345);
}
.checkmark::after {
  border-color: var(--check-secondary, #fff);
}
```

That's it! The final CSS looks like below:

```css
.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--check-primary, #61d345);
  position: relative;
  transform: rotate(45deg);
}
.checkmark::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-color: var(--check-secondary, #fff);
  bottom: 6px;
  left: 6px;
  height: 10px;
  width: 6px;
}
```

I have also created a Codepen:

{% codepen https://codepen.io/shhdharmen/pen/bGBpdmZ %}

---

Thank you for reading this article. Let me know your feedback and thoughts in comments section. I am also available on twitter via [@shhdharmen](https://twitter.com/shhdharmen).

Happy Coding.

🌲 🌞 😊