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);
}

    CSS Howto..

    How to make hover dynamic in CSS?

    drawing a image like shown

    CSS - how to put a opacity border to an input?

    How to free a paragraph from its CSS style?

    Image title both alingn. How to make each element aligned vertically?

    how to effect td on fixed table layout

    How do I code a BTN in an HTML project to open a users email client

    How to correct Div overlapping?

    How to fix html border corner slope with css?

    Show popup after page load

    CSS how to place an image to the right of variable width text on roll over?

    How to set an html element's height as { 100% - 10em from bottom }

    ExtJS how to remove grid row underline when selected and over

    How to make a rounded corner rectangle with a cut corner using css?

    How to brighten Textbox when it is focused?

    How can I set -webkit-mask-box-image through javascript?

    Meeting Calendar | How to take care of the overlapping meetings to show in the calendar?

    How to get a css stylesheet value that is not interpreted by the browswer?

    How to hide class=“” CSS

    How to wrap entire line with overline and underline , until the end of the line ?

    On a web page how do I display a label that changes to a drop down box on hover

    why image show space and go right, it should be fill up the gap

    How to put images to the right and text to the left in css

    How to align the header menu from left? i see a unexpected margin on left. Help please

    How make divs next to each other?

    PHP & CSS: How to get hover effect for each row of a table?

    How to use jQuery to fade in/out li a:hover css background-color?

    How to format text using CSS

    When i Check the Checkbox how do I change that specific row style? C# ASP.NET

    How to make a pentagon fold in half with CSS animation?