Adding a before and after psuedo selector to a button element-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

CSS :

        a::before{
            content:"grocery store : ";
            background-color:blanchedalmond;
            border:1px solid #000000;
        }
        a::after{
            content:" (available)";
            background-color:bisque;
        }

HTML :

  <a href="#">spam</a><br>
  <a href="#">parrot</a><br>
  <a href="#">ex-parrot</a><br>
  <a href="#">eggs and spam</a><br>

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