Solution 1 :

It’s a good question. You can use the before-after psuedo selectors for to manupilate a HTML file from a CSS file.That’s why we have to use ‘content’ attribute when using before-after selectors.

Solution 2 :

Quick edit : Just copy and paste the code below…
Is it possible to have an :after pseudo element on a button?

<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Button before / after</title>
            font-size: 1.4em
            content:"grocery store : ";
            border:1px solid #000000;
            content:" (available)";

<h1>button ::before - ::after</h1>
    <button id="button_1">Spam</button><br>
    <button id="button_2">Parrot</button><br>
    <button id="button_3">Ex-parrot</button><br>
    <button id="button_4">Eggs and spam</button><br><br>
    <div id="output">Click on a button</div>
        function addListeners(){
            button_1.addEventListener("click", onMouseClick);
            button_2.addEventListener("click", onMouseClick);
            button_3.addEventListener("click", onMouseClick);
            button_4.addEventListener("click", onMouseClick);
            button_1.addEventListener("mouseleave", onMouseLeave);
            button_2.addEventListener("mouseleave", onMouseLeave);
            button_3.addEventListener("mouseleave", onMouseLeave);
            button_4.addEventListener("mouseleave", onMouseLeave);
        function onMouseClick(e){
            output.innerHTML = (;
            // or
            // output.innerHTML = ( + " clicked");
        function onMouseLeave(e){
            output.innerHTML = ("Click on a button");

link :

Problem :

What happens when one adds a before and an after psuedo selector to a button element?

I tried it already but couldn’t really make anything out of it. New to web dev.


Comment posted by edit

Your answer could be improved with additional supporting information. Please

Comment posted by Paulie_D

Links are not buttons

Comment posted by tatactic

@Paulie_D Indeed, and English is not my cup of tea, Sorry, I just read the question again. 😀