Question

2

Use javascript to click on a pseudo-element?

rated 0 times [ 3] [ 1] / answers: 1 / hits: 38563 / 12 Years ago, tue, october 2, 2012, 12:00:00

I'm wondering how to enable the clicking on a :before pseudo-element (the orange part of the div on the JSfiddle I link to below). I've read that since pseudo-elements aren't in the DOM you would need a hack for this. Unfortunately, I can't find an existing Stackoverflow Q&A that actually shows working code.

Link: http://jsfiddle.net/Vv6Eb/4/

HTML:

<div></div>

CSS:

div { position:relative; background-color:#333;

      padding:20px; margin:20px; float:left; 

}



div:before { content:; display:block; 

    padding:5px; background-color:#f60; border:2px solid white; 

    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; 

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

darleneh

Add To Favorites

Follow

Total Points: 231

Total Questions: 110

Total Answers: 94

Location: Spain

Member since Thu, Dec 23, 2021

3 Years ago

answered 12 Years ago annie · Accepted Answer

A workaround for this would be to dynamically append a <span> to the item and assigning a click method to it. Like this fiddle.

var item = $('<span />');

item.click(function() { alert('click'); });

$('div').append(item);

CSS

div { position:relative; background-color:#333;

      padding:20px; margin:20px; float:left;

}



div span { content:; display:block;

    padding:5px; background-color:#f60; border:2px solid white;

    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;

}