'How do I fix this? CSS '::Before' is not working in HTML [duplicate]

I'm trying to use ::before in CSS, but it doesn't work. I need it to create a hover effect. But I had to learn this, but I just can't seem to use it properly. I don't know why; I tried every tutorial on YouTube, but it just doesn't want to work.

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>

    <body>

       <center>

           <a href = "https://www.google.com/search?q=Get+rickrolled"><button id = "Btn" class = "Btn" >Rickroll</button></a>

           <style>

               .Btn::Before {

                   Content: '';
                   Position: Absolute;

                   Border-Width: 5px;
                   Border-Color: Cyan;
                   Width: 150px;
                   Height: 50px;

                   Font-Size: 30px;
                   Font: Comic;
                   Align-Items: Center;

                   Margin-Top: 50px;

                   Z-Index: -1;

                   transition: 0.6s;
               }
           </style>

    </body>
</html>
htmlcss


Solution 1:[1]

Use this code:

<!DOCTYPE html>
<html>
<head>
    <style>
        Button:hover {

            background-color: green;
            Content: '';
            Position: Absolute;

            Border-Width: 5px;
            Border-Color: Cyan;
            Width: 150px;
            Height: 50px;

            Font-Size: 30px;
            Font: Comic;
            Align-Items: Center;

            Margin-Top: 50px;

            Z-Index: -1;

            transition: 0.6s;
        }

   </style>

</head>

<body>

    <a href="https://www.google.com/search?q=Prakhar+Doneria" target="black"><button>Rickroll</button></a>

</body>

</html>

Solution 2:[2]

First put <style> </style> inside the <head> tag.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Peter Mortensen
Solution 2 Peter Mortensen

Related Questions