Clicking on buttons through a container mask - html

Question

I have a container with some clickable items, and at the bottom of the container, there is a gradient that I'm adding with .container:after to create a fade effect. I would still like the items at the bottom to be clickable, but also to be affected by the fade, so putting the fade behind the clickable items won't work.
http://jsfiddle.net/mwjj7hff/1/
HTML:
<div class="container">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
CSS:
.container {
border: 1px solid #ccc;
font-family: sans-serif;
height: 400px;
overflow: hidden;
position: relative;
width: 200px;
}
.container:after {
background: linear-gradient(to bottom, rgba(255, 255, 255, .3) 0%, white 100%);
bottom: 0;
content: " ";
height: 150px;
display: block;
position: absolute;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
cursor: pointer;
margin: 3px;
padding: 3px;
text-align: center;
}
li:hover {
background: #99d;
}

Answer 1

A quick, easy solution would be to add pointer-events: none to the pseudo-element.
In doing so, you can essentially click through it:
MDN - pointer-events: none
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
Updated Example
.container:after {
background: linear-gradient(to bottom, rgba(255, 255, 255, .3) 0%, white 100%);
bottom: 0;
content: " ";
height: 150px;
display: block;
position: absolute;
width: 100%;
pointer-events: none;
}
Browser support for pointer-events can be found here - currently 87.29%.