How are these check-marks being drawn?

Tags: css

Problem :

I was reading about pseudo-elements in the MDN reference site for CSS, and in the article about ::before pseudo-element, they use a simple to-do list as an example. Its code is as follows:

HTML

<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>

CSS

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

Javascript

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

I get what the Javascript code does, and I was expecting that the check-mark would be images, but they're drawn by the CSS code. I can see where are the instructions about what and how to draw it, but I can't understand these instructions.

I also didn't know how to google about it (because I don't know the name of this technic in CSS), so I really got stuck here. How does it work?

---

Solution :

li.done::before { /* This creates a (pseudo) element that is (by default) placed before the content, but is hidden (by default). */
  content: ''; /* This makes this (pseudo) element actually appear. */
  position: absolute; /* This makes it not push the content or affect it in anyway and also makes it act as if it has some sort of display: inline-block; */

  /* These create a right and bottom border and give a width and a height (width * 2) to this (pseudo) element, so you get a reversed L shape. */
  border-color: #009933; /* 
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  width: 0.5em;

  /* These position this (pseudo) element relatively to its real/owner element, the LI, since it has position: relative. */
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;

  /* This rotates this (pseudo) element. When you rotate a reversed L, it looks like a check mark. */
  transform: rotate(45deg);
}