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

Experience the convenience of Visual Studio Code's auto-completion feature for HTML tags even when working within an

My HTML file has a babel script embedded within it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React tutorial</title> <script src="https://unpkg.com/react@16/umd/react.development.js" ...

javascripthtmlreactjsvisual-studio-codebabeljs

H4 Heading in CSS/Bootstrap not aligning centrally

Having some trouble centering a <h4> title within a bootstrap modal. Here is the code snippet: <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="moda ...

cssbootstrap-4

The CSS specificity of a nested HTML element with no explicitly defined styles

Seeking clarification on this specific CSS cascading/inheritance rule. In the given example, I would have expected the text inside the em tag to be colored #000000, but I was informed that it would actually be colored #ff0000. I am familiar with CSS speci ...

csscss-selectors

Send the data to be placed in the div to launch the window

I'm attempting to open a new window within the same tab and transfer some html code to be inserted into a specific div section of the newly opened window. However, I'm encountering difficulties in passing the data as illustrated below: JavaScrip ...

javascripthtml

Implement a function that runs upon Page Load using Javascript

Here is some Javascript code that loads a map with different regions. When you hover or click on a country, additional information about that country is displayed on the right side of the map. I would like to have a random country already displaying infor ...

javascriptjquerycsspageloadregion

Difficulty linking CSS to HTML in a Flask web application

My HTML/CSS file is pretty straightforward: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <meta name=&quo ...

pythonhtmlcsspython-3.xflask

What could be causing the issue with my Angular integration with Jira Issue Collector to not function properly?

Looking to link the Jira issue collector with an Angular application I attempted something along the lines of Component.ts import { Component, OnInit } from '@angular/core'; import * as jQuery from 'jquery'; declare global { inter ...

javascripthtmlangularjiraintegration

Difficulties with integrating tooltips into SVGs

Being a minimalist, I am facing restrictions while working on a website. I desire interactive tooltips to appear when users hover over specific sections of my SVG. However, I also want to incorporate this interactivity within the SVG itself. The challenge ...

javascriptcsssvg

Utilizing an array of font styles in a single line while maintaining a consistent width

I am creating a simple webpage with fixed width text. Check out this sample HTML: <div id ="wrap"> <h1>An Annoying Heading</h1> <p>Some text some text some text some text some text some text some text some text some text so ...

htmlcss

No output is displayed in the absence of errors. The program is functioning correctly

app.js angular.module('app', ['ionic', 'ui.router']) .config(('$urlRouterProvider', '$stateProvider', function($urlRouterProvider,$stateProvider){ $urlRouterProvider.otherwise('/'); $sta ...

javascripthtmlangularjsnode.jsionic-framework

Animating the process of eliminating a background image

I am working on a project with a div that has a background-image. The goal is to make the image fade away when a button is clicked, and then fade in again when another button is pressed. The focus is on only fading the background image while keeping the co ...

jqueryhtmlcssanimationjquery-animate

Developing a customizable datepicker with the ability to select specific months or date ranges

I am currently developing a WebApp using flask and constructing templates in HTML/JS for the front end. I am in need of a datepicker that will provide the user with the option to choose a specific date range or select a range of months. Take a look at the ...

javascripthtmldatepicker

Different ways to manipulate the CSS display property with JavaScript

Having trouble changing the CSS display property to "none" using JavaScript. Check out my code: <div class="mydiv" onClick="clickDiv1()">hello</div> <div class="mydiv" onClick="clickDiv2()">hi</div> <div class="mydiv" onClick=" ...

javascripthtmlcss

Combining CSS documents

In order to improve page load speed, I need to consolidate multiple CSS files into one large file. Will the styles function properly if I merge them all together, or are there potential issues when combining multiple CSS files? My software is built in Ja ...

javacssmerge

- Customizing the width of each dropdown level in a unique way

Working on a customized menu design that you can view live at: Focusing on the third level menu, I encountered an issue where all menus have the same width due to sharing the dropdown-menu class. While I understand the root cause of the problem, I am unsu ...

jqueryhtmlcsstwitter-bootstrap-3dotnetnuke

Transforming the playbackRate property of a web audio-enabled audio element

I recently experimented with integrating an audio element into the web audio API using createMediaElementSource and achieved success. However, I encountered an issue when attempting to change the playback rate of the audio tag. Despite trying multiple appr ...

javascripthtmlhtml5-audioweb-audio-api

What is the best way to position a popup div in CSS?

Currently, I am in the process of developing a website that displays DVD details when hovering over an image, similar to what is shown in picture 1. However, I've encountered an issue where the content gets cut off for DVDs located on the right side o ...

javascripthtmlcss

Using jQuery to create an array variable and Passing the array to a different PHP page

Although I have managed to create a function that works perfectly for me, I am facing an issue with the jQuery part at the bottom. Currently, I am only able to trigger an alert message and not store the data as a real variable. The function is functionin ...

javascriptphpjqueryhtmljson

How can I place a submit button on a separate line using CSS?

Is there a way to position an input type=submit below a text area without relying on br tags or div elements? I'd prefer a solution using CSS. ...

cssinputnewlinesubmit

Scrolling a table to the current ng-init date in AngularJs: What’s the best approach?

I found a code snippet in my DOM that sets the current date on a table. <table id="daysTableLeft" class="table table-hover" ng-init="getHorraire(pickDateRow,$index,0)"> <tr ng-repeat="fd in getFullDayDate track by $index ...

jqueryhtmlcssangularjs