Having trouble getting CSS "::Before" to work in my HTML code - any solutions?

I've been struggling to make use of the ::before pseudo-element in CSS for a hover effect. Despite going through various tutorials on YouTube, I can't seem to get it to work properly. I'm not sure why this isn't working as expected.

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

Answer №1

Here is the code you can use:

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

Answer №2

To begin, insert <style> </style> within the <head> element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with `Float:left` not functioning as expected on a div with dynamically changing

I'm currently working on setting up a base div that I can easily duplicate whenever I need to add new content to my website. Here's how the initial HTML structure looks: <div class="post"> <p class="date">17/03/1014</p> <h1& ...

htmlcss

Adjust the loading bar component in Material UI to allow for customizable color changes

I am currently learning how to use material ui. My goal is to customize the loading bar's CSS. I checked the documentation and utilized colorPrimary classes. However, the changes are not appearing as expected. Could you please guide me on how to resol ...

javascriptcssreactjsreduxmaterial-ui

Having trouble triggering a click event with JQuery

I have a hidden link for downloading Audio Files that I want the user to access using a button. However, I am having trouble triggering the click event. Below is the HTML code: <a class="APopupDown" data-icon="home" id="DownloadFile" href="http://yaho ...

javascriptjqueryhtmlclicksimulate

Why is it that text doesn't function properly next to certain images?

I have been using the code below to place text next to an image: <div style="display:inline-block;vertical-align:bottom"> <p><img src="CIMA/CimaMetanoia.png" alt="Cool" height="50%" width="50%" /></p> </div> ...

htmlcssimagepositioning

Locate the div element containing specific text and remove the text from the

Is there a way to locate a div that contains specific text and remove only that specific text from the div? For instance: <div> DeleteText <span>Something text</span> <div>Something span inner text </div> </div> I am l ...

javascriptjqueryhtml

Intersection of content in panel-body using bootstrap tab pills

Can someone help me solve a major issue? I need the content of each tab to overlap as if they are unaware of each other. Currently, my code is saved in this fiddle: https://jsfiddle.net/axq882de/1/. When I click on different tabs, the contents should remai ...

jqueryhtmlcsstwitter-bootstrap-3

Update D3 data, calculate the quantity of rows in an HTML table, and add animations to SVGs in the final

Attempting to update data in an HTML table using D3 has proven to be quite challenging for me. My task involves changing the data in multiple columns, adjusting the number of rows, and animating SVG elements in each row based on new data arrays. Despite tr ...

javascripthtmld3.jssvg

A combination table featuring both fixed and scrolling columns

I'm struggling with a table design where I want part of it to be fixed and the rest to be scrollable. My goal is to achieve something similar to this example, but within a single table structure. If interested, you can view an example here. I found ...

htmlcsscss-tables

How come the max-width property is not functioning properly on tables in Internet Explorer 7?

Is there a reason why the "max-width" property does not seem to have any effect on tables in Internet Explorer 7? While it works fine on other elements, when applied to a table, the max-width rule is completely ignored. <!DOCTYPE html PUBLIC "-//W3C//D ...

htmlcsshtml-table

Hide the address bar in a Google Maps iFrame

After numerous attempts, I still can't seem to hide the address bar on this Google Maps iFrame. Can anyone provide a solution or workaround for this issue? I have tried using display:none; in our CSS, which successfully hides the address bar when I d ...

javascripthtmlcsswordpressiframe

Combining inline input fields and select buttons with Bootstrap 3

I've been exploring different ways to align form elements inline, including dropdown buttons and select buttons, but have only had success with smaller size buttons around 40px wide. My main challenge now is trying to create a search bar with an input ...

jqueryhtmlcsstwitter-bootstrap

The contact form is encroaching on the footer

The issue arises when the contact form overlaps with the footer. When testing the code on Codepen, the styles are correctly linked and working for everything except the contact form. I have attempted adjusting the padding, bottom position, etc., but nothin ...

htmlcssbootstrap-4

Background image for input button in Internet Explorer 6

Can you create a custom background image for the input type="button" in Internet Explorer 6? ...

htmlcssinternet-explorercross-browser

Unable to transition slides in AngularJS on Safari iOS 9 due to malfunctions

Having some CSS classes that smoothly slide my ng-view left and right during route change, everything was working well on most browsers and phones until now. Under ios 9, the animation is not functioning properly. Instead of sliding left to right, the view ...

ioscssangularjsmobile-safariios9

When I click the submit button in HTML PHP, the text in the text field disappears. How can I make sure the text stays

I am facing an issue with the functionality of my form's submit button. When I click the button, the text in the text field disappears, but I need it to remain for another button that requires it. These two buttons are part of different functions, and ...

phphtmlbuttonsubmittextfield

How is it possible for my search results page to retrieve the words I input?

Currently, I am in the process of creating the search result page and I plan to utilize dynamic routing for implementation. Here is a snippet of my search bar code: <Link href={`/productSearchResult/${searchWord}`}> <a className={styles.navbar_s ...

javascripthtmlreactjsnext.jsdynamic-routing

Mastering the Art of Scrolling

Can someone please tell me the name of this specific scrolling technique? I am interested in using something similar for my project. Check out this example site ...

javascriptjquerycsshtml

Exploring the concept of overflow and minmax behavior in CSS grid

Summary: Example of overflow in nested grid layout on Codepen, and attempts to fix it using CSS grid-template-columns: repeat(16, minmax(0,1fr)); Within the element called container, there are two main elements - summary-wrapper and stats-wrapper The gri ...

htmlcsscss-grid

What is the best way to show checkbox selections based on my database structure?

Two variables, one for checkboxes and the other for checked values are causing an issue in displaying them from controller to view. The code to handle this in the controller is as follows: $scope.infoParticipant = functionThatGetsParticipants(); ...

htmlangularjscheckbox

Tips for creating code that will allow users to update their status on a web application, similar to Twitter

I am interested in developing a web application that can receive status updates (text) from an Android device. My plan is to use Ajax and HTML for this project. I'm looking for guidance on how to dynamically update the status on the web page without r ...

htmlajaxweb-applicationstwitter