-1

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.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Favour Royalty
  • 1
  • 1

2 Answers2

-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.

adonmez04
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 31 '22 at 01:27
-1

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

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button before / after</title>
    <style>
        body{
            font-family:sans-serif;
            font-size: 1.4em
        }
        button::before{
            content:"grocery store : ";
            background-color:blanchedalmond;
            border:1px solid #000000;
        }
        button::after{
            content:" (available)";
            background-color:bisque;
        }
    </style>
</head>

<body>
<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>
    <script>
        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 = (e.target.innerHTML);
            // or
            // output.innerHTML = (e.target.id + " clicked");
        }
        function onMouseLeave(e){
            output.innerHTML = ("Click on a button");
        }
        addListeners();
    </script>
</body>
</html>

link : https://www.w3schools.com/cssref/sel_before.php

tatactic
  • 1,379
  • 1
  • 9
  • 18