click event pseudo element

by narensrinivasans

HTML

<p>Test</p>

CSS

p {
    display:block;
    position:relative;
    width:100px;
    height:100px;
    border:1px solid #000;
    text-align:center;
    vertical-align:middle;
    font-size:1em;
    line-height:100px;
}
p:before {
    display:none;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:rgba(0,0,0,0.4);
}
p:hover:before {
    display:inline-block;
    content:'';
}

JavaScript

var test = $("p").before();
test.click(function(){
    alert('test');
});