How can I attach :after and :before pseudo-elements to a submit button?

I'm attempting to enhance my submit button with :after/:before elements, but I'm having trouble getting it to work properly.

Specifically, I want to add a swipe (Sweep To Right) transition effect on the button from left to right. Similar to - this example

<input class="submitBtn" type="submit" name="" value="Submit">

.submitBtn{ position: relative; width: 100%; height: 50px; background: #000; text-align: center; color: #FFF; border: none;}
.submitBtn:after{ content: ''; position: absolute; width: 100%; height: 100%; background: yellow; left: 0; top: 0;}
htmlcss

Answer №1

Input elements are unable to support pseudo-elements.

In accordance with the specification:

The :before and :after pseudo-elements behave as if they were actual elements placed just inside their associated element when interacting with other boxes.

This means that pseudo-elements can only be applied to container elements, and since input elements cannot contain other elements, they are unable to support them.

ALTERNATIVE SOLUTION

To achieve your desired outcome, you could encapsulate the input within a container:

.submitWrap::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: yellow;
  left: 0;
  top: 0;
  z-index: 1;
}

.submitBtn {
  position: relative;
  z-index: 2;
}
<div class="submitWrap">
  <input class="submitBtn" type="submit" name="" value="Submit">
</div>

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

The printing function for the window system can cause disruptions to the layout of the table

After creating a page with a simple table that can be filled in and printed, I noticed some issues with the table formatting after printing. The intended table design was supposed to look like this: https://i.stack.imgur.com/aAk89.png However, upon print ...

javascripthtmljquerycss

What could be the reason behind the failure of this :after element?

I am facing an issue with the preloader on my webpage where the animation is not displaying as expected. The animation should appear on top of a dark black background before the page fully loads, but it seems to be missing. The CSS for the animation works ...

javascriptjqueryhtmlcss

Sideways movement of a single line within a table

Would you please help with a challenge I'm facing? I want to create a horizontally scrollable row that spans 100% of the page width without overflowing on top of the background image and while keeping the header text in focus. This is what I have att ...

cssreactjsmaterial-ui

Animating with Jquery swipe motion

I am looking to make my brand image appear animated when the site is opened. I want it to swipe or move linearly from left to right and then return to its original position. I tried searching on Google for a solution but couldn't figure out how to mak ...

jquerycss

Interactive Div Updates Dropdown Selections Automatically

// function to add set of elements var ed = 1; function new_server() { ed++; var newDiv = $('#server div:first').clone(); newDiv.attr('id', ed); var delLink = '<a class="btn btn-danger" style="text-align:right;m ...

javascriptjqueryhtml

Creating a Navigation Bar in Outlook Style Using Javascript and CSS

Looking for a navigation sidebar design similar to Outlook for my web application. I have seen options available as Winform controls and through Visual WebGUI, but these are Microsoft-dependent solutions. We need a Javascript & CSS based solution that is s ...

javascriptjqueryhtmlcss

Refine the table by selecting rows that contain a specific value in the href attribute of the <a> tag, and display the parent row when the child row

I've been working on filtering and searching the table below based on the href value. My code successfully filters the displayed columns in the table, but it fails to work when I search for a string within the href attribute. For instance, if I searc ...

javascripthtmljquerycss

Button click functionality for updating in Classic ASP is functioning correctly exclusively in Internet Explorer and not in other web browsers

Currently, I am in the process of enhancing a Classic ASP application. Within this application, there is an HTML table that is populated from a SQL database. One cell within the table contains checkboxes. Upon clicking one of these checkboxes, a popup wind ...

javascripthtmldomasp-classicadodb

What's the name of the auto-triggered dropdown menu feature?

Visit Amazon's official website Description: Within the 'Shop by Department' section- A drop-down menu that remains visible without requiring you to hover over it. However, when the browser is in a non-full-screen mode, the menu disappears ...

jquerycssmenu

Exploring the world of JQuery Ajax selectors

I am attempting to create a comment system similar to the one found at . I have the AJAX code below, but I am having trouble uniquely selecting text areas for each post. The issue is that the number of posts can vary, so it's important that each post ...

phphtmljquerypost

New Ways to Style the Final Element in a PHP Array - Part 2

So, here's the current challenge I'm facing along with a detailed explanation of what I'm trying to achieve. Initially, following your suggestions worked smoothly; however, things took a drastic turn when I altered the ORDER BY field and int ...

phpcssarrays

Error Alert: It is required that only variables are passed by reference in the file located at /home/indiamaz/public_html/musicwala.cf/get-zip.php on line 31

A few days ago, my PHP project was running smoothly without any errors. However, for the past two days, I have been encountering a Strict Standards error and a Warning message in my code. I'm unsure of what caused this sudden issue and would appreciat ...

phphtml

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

How can I display selected cities on a different webpage after clicking a button? Currently, I can only get the results on the same page. For example, if a user selects NYC and Delhi, those cities should be displayed on another HTML page. ...

javascripthtmljquerycss

What is the best way to add several icons at once?

Is there a way to insert multiple star icons directly below the review text? I attempted to use pseudo elements to add the icons, but I could only insert one icon when I actually need to include multiple icons. Here is what I have tried so far: .review:: ...

htmlcss

Whenever I adjust the zoom on my HTML page, it either scrolls upwards or downwards

Is there a way to prevent the page from scrolling when using zoom-in or zoom-out? I attempted using overflow: hidden in the body, but it did not work. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

htmlcss

Output the result of a PHP script inside a JavaScript code

I'm having trouble getting the code below to display the success word. Can anyone spot what's wrong with it? Appreciate any help in advance. <script type="text/javascript"> function verification(){ var s = document.test_form.textfiel ...

javascriptphphtml

Adding padding to the navbar when collapsed causes extra space between the brand name and the hamburger icon button in Bootstrap

I am in the process of creating a fixed-top navigation bar for my webpage. However, I have encountered an issue where there is excessive space between the "Brand" name and the collapsed menu icon when viewed on smaller screens. Here is a visual representa ...

htmlcsstwitter-bootstrapnavbar

Increasing the font size significantly will not change the fluidity of the layout

When I initially didn't set the font-size, and inserted a long text in a div like this: <div>Hello World Hello World Hello World Hello World Hello World Hello World</div> If I narrow the browser, the overflow part would change to the nex ...

htmllayoutfont-sizeliquid-layout

Controling attributes during the design process

Experimenting with a basic User Control in Visual Studio 2008: I've created a Panel called Wrapper with various controls inside. Will Visual Studio be able to handle this during the design phase? public partial class TestControl : System.Web.UI.UserC ...

cssvisual-studio-2008user-controlsdesign-time

When a container is styled with 'overflow-y: auto', it will display additional horizontal and vertical scrolling bars

I have two files, one HTML and one CSS. The HTML file contains the following code: <div class="app"> <div class="header"></div> <div class="main"> <div class="container_1"> ...

htmlcss