making some properties human readable

https://codesandbox.io/s/q3ww1znxn9

by Swedish_li

HTML

<ul>
  <li>Hover on me !</li>
  <li>Hover on me !</li>
  <li>Hover on me !</li>
</ul>

CSS

:root {
  --tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
  --animate-right: translateX(20px);
}

li {
  box-shadow: var(--tiny-shadow);
}

li:hover {
  transform: var(--animate-right);
}



/*--- base ---*/
html {
  background-color: green;
}

ul {
  padding: 20px;
  list-style: none;
  width: 300px;
}

li {
  font: normal 18px sans-serif;
  padding: 20px;
  transition: 0.4s;
  margin: 10px;
  color: #444;
  cursor: pointer;
  background-color: yellow;
}