Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add onclick with css pseudo-element after

Is it possible in my css file to do something like that?:

.myclass:after{    content:"click me";    onclick:"my_function()";  } 

I want to add after all instances of myclass a clickable text, in the css style sheet.

like image 395
Oli Avatar asked Nov 28 '11 19:11

Oli


People also ask

How does pseudo-element detect click?

If you must have a click handler on the red region only, you have to make a child element, like a span, place it right after the opening <p> tag, apply styles to p span instead of p:before, and bind to it. Hope it helps!!

Can I add Onclick in CSS?

We cannot achieve the exact JavaScript onclick event in CSS. However, we can use a CSS trick to simulate an onclick event. The core concept behind this trick is the use of a checkbox and the label tag. We can attach them using the same value for the id attribute in the checkbox and the for attribute in label .

When would you use the :: before or :: after pseudo-element in your CSS?

Special welcome offer: get $100 of free credit. CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.

What is doing link pseudo-class in CSS?

The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited <a> or <area> element that has an href attribute.


2 Answers

Is it possible in my css file to do something like [see code above]?

No

The important question to ask is why.

HTML has control of the data within the webpage. Any CSS or JS is specified via the HTML. It's the Model.

CSS has control of the styles, there is no link between CSS and HTML or JavaScript. It's the View.

JavaScript has control of the interactions within the webpage, and has hooks to any and all DOM nodes. It's the Controller.

Because of this MVC structure: HTML belongs in .html files, CSS belongs in .css files, and JS belongs in .js files.

CSS pseudo-elements do not create DOM nodes. There is no direct way for JavaScript to access a pseudo-element defined in CSS, and there's no way to attach an event to said pseudo-elements.

If you've got a set structure in place, and can't add the additional content necessary to produce new links within the HTML, JavaScript can dynamically add the new elements necessary which can then be styled via CSS.

jQuery makes this very simple:

$('<span class="click-me">click me</span>').appendTo('.myclass').click(my_function); 
like image 80
zzzzBov Avatar answered Oct 02 '22 13:10

zzzzBov


Well,

using expression it might actually be possible for internet explorer only.

Otherwise:

No. Not at all, that's not what css is made and intended for.

like image 36
The Surrican Avatar answered Oct 02 '22 13:10

The Surrican