How to fade the edge of a div with just CSS? [duplicate]

Example on codepen: http://codepen.io/anon/pen/sbHAc/

Relevant CSS

ol {
  border   : 1px #d8d8d8 dashed;
  position : relative;
}

ol:after {
  content  : "";
  position : absolute;
  z-index  : 1;
  bottom   : 0;
  left     : 0;
  pointer-events   : none;
  background-image : linear-gradient(to bottom, 
                    rgba(255,255,255, 0), 
                    rgba(255,255,255, 1) 90%);
  width    : 100%;
  height   : 4em;
}

Resulting effect

if the browser supports the pointer-events property (all major browsers except IE<=10) then the text under the gradient will be also selectable/clickable.