Add onclick with css pseudo-element after

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

   content:"click me";

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

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


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);

A CSS-Only Click Handler Using the :target Pseudo-Class (No , If you've used an <a> tag before, you're likely familiar with the href attribute. Since this is all the HTML we'll need so far, let's add our CSS to� In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default. /* Add an arrow after links */ a::after {content: "→ ";}


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


No. Not at all, thats not what css is made and intendet for.

Adding onclick event to element BEFORE appending to the DOM , Do I really have to add the click event AFTER the element has been added to the DOM? If so, what are the pros/cons of doing this instead: var spanHolder =� The event handlers would all go on the div, and not the pseudo element because it doesn't exist in the DOM. See Manipulating CSS :before and :after pseudo-elements using jQuery for some more info. Especially BoltClock's answer. Also see Felix's comment for another possible solution without mouse position: Only detect click event on pseudo-element

If something can be done with jQuery, then it is sure that it is possible to do it without that. Lets see a data model:

<div id="container">
<div id="hasblock" onclick='clickFunc(this, event)'></div>

We need some stylesheet:

div#container { width:100px; height:50px;position relative; border:none;}
div#hasblock {width:100px; height:50px;position absolute;border:solid black;}
div#hasblock::after {content:"Click me"; position: absolute; border:solid red;
top:80px;left:0px;display:block;width:100px;height:20px; font-size:18px;}

And a code:

function clickFunc(his, event)
{if (event.clientY>his.clientHeight){console.log("It was a click");};    }

CSS ::before/after PseudoElements - How?, If an element has an onClick trigger which adds ::after/before pseudo-elements. How do you detect if/when these pseudo-elements have been� CSS - The ::selection Pseudo-element. The ::selection pseudo-element matches the portion of an element that is selected by a user. The following CSS properties can be applied to ::selection: color, background, cursor, and outline. The following example makes the selected text red on a yellow background:

Use jQuery's After:

Element: click event, on one element and the pointer is moved outside the element before the button is click fires after both the mousedown and mouseup events have fired, Add a dummy onclick="void(0)" attribute to the element or any of its� I had a similar situation, I needed a popup div with onClick where I couldn't add any JS or change the markup/HTML (a truly CSS solution) and this is possible with some caveats. You can't use the :target trick that can create a nice popup unless you can change the HTML (to add an 'id') so that was out.

No,but you can do like this

In html file add this section

<div class="arrow">

In css you can do like this

.myclass div.arrow{
   content:"click me";

Hope it will help you

On :target, The :target pseudo selector in CSS is both pretty cool and pretty limited in ( since there can only be one and it can only be related to one element) but it's similar. which would change the URL without adding an entry to the browser history. was before I started using jquery) whenever I had an onclick event I would set� Step 2: Add the overlay element dynamically with ::after. Natively, CSS gives us the powerful ::before and ::after elements for adding stylistic content to the page that shouldn't affect markup. By apply ::before or ::after to an element, you can insert a dynamic element into the DOM before or after the selected elements children.

jQuery before() Method, Tip: To insert content after selected elements, use the after() method. Syntax. $( selector).before(content,function(index)). Parameter, Description. // Get the button, and when the user clicks on it, execute myFunction document.getElementById("myBtn").onclick = function() {myFunction()}; /* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */

jQuery insertBefore() Method, Tip: To insert HTML elements after the selected elements, use the insertAfter() How to use the insertBefore() method to insert an existing element before each� The CSS :after pseudo-element matches a virtual last child of the selected element. Typically used to add cosmetic content to an element, by using the content CSS property. This element is inline by default. The emphasis is mine. Source: MDN Docs

CSS Pseudo-elements, Insert content before, or after, the content of an element. Syntax. The syntax of pseudo-elements: selector::pseudo-element { property:� The iOS fix is to add an empty onclick event to the label and the Android fix is to add a fake animation on the body element. One advantage of the checkbox hack over the pseudo element selector hacks is we can use the same element to toggle something on and off. Click the label once to check the box.