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

Tips for highlighting a Material UI Button when pressing the Enter key

Once the user has completed the final input, they need to press the save button The 'Tab' key typically moves the focus to the next element (in this case a button), but I want to use the 'Enter' key for this action. Can anyone advise o ...

htmlnode.jsreactjsmaterial-ui

Is it possible to isolate specific HTML elements within a designated area?

Is it possible to identify which elements are located within a specific rectangular region on a web page identified by a URL? UPDATE: The default settings for screen resolution, font size, etc. can all be adjusted to reasonable values. ...

htmlurlscreen-scrapinghtml-content-extractionlayout-extraction

Embrace the words enveloped within large quotation marks

I am seeking a way to format paragraphs with large quotation marks surrounding them. I have attempted several methods, but my line-height seems to be affected, as shown in the following image: Can anyone suggest a proper method for achieving this? (Addit ...

htmlcss

How to position an absolute element beneath a fixed element

My website is experiencing a problem where the fixed header is overlapping an absolute paragraph on this page. Does anyone know how to resolve this issue? ...

javascripthtmlcss

Retrieving input values from different input types within a div using jquery

I have a dilemma with two divs that I switch between based on whether the user wants to add single select options or multiple. Only one div is visible at a time. <div class="form-group row" id="divOptions"> @Html.Label("Choices", htmlAttrib ...

jqueryhtmlajaxasp.net-mvc

Rendering images in Next.js version 10

Just recently, Next.js version 10 was launched featuring the latest Image element, making it a great asset for websites that heavily rely on images! When I receive an HTML response from the server, it looks something like this: HTML = "<div> &l ...

javascripthtmlreactjsnext.jsnextjs-image

Issue with CSS background color not extending to full screen in webkit browsers when using 960.gs grid system

When using 960.gs, I have created a login screen with a div for the login form that has a background image. This div is positioned below a header, which centers it in the browser window. In my CSS, I am setting the body color as follows: body { backgr ...

htmlcss960.gs

The alignment of the third column div is off and not displaying properly

I am having some trouble with aligning the divs on my page in a column layout. Despite setting the first two divs to float left, the third one does not align properly. I want the third div to be floated right and aligned with the first two. You can see an ...

csshtml

Tips on how to ensure the navigation menu is the same size as its child elements in the navigation menu

I'm currently designing a navigation menu that includes a child navigation menu. My goal is to have the size of the main navigation menu match that of the child navigation menu. To achieve this, I've created three hyperlink tags followed by a di ...

htmlcss

When the user clicks on the body, I want the element to slide up, which will then slide down when the button is clicked

As a novice in Jquery, I am currently implementing a simple slide toggle on a button. Initially, the div is set to display none, and when the button is clicked, the slide toggle function is triggered. This works well. However, I also want the div to slide ...

jqueryhtmlcss

Experiencing an issue with referrer: The global symbol needs an explicit package name

my $refer = $ENV{HTTP_REFERER}; my $gk1 = substr($str1, -4); if ($gk1 = .swf) { my $antigk = "gk detected"; } else { my $antigk = $link; } I am encountering issues with this code after making some modifications. What could be causing the errors? I ...

htmlperl

Is it possible to resume CSS animation when the page is first loaded?

I'm looking for a way to ensure that my CSS animations on the elements in my header.php file continue smoothly when navigating to different pages. For example, if I have a 200-second looped animation and navigate to the "about us" page 80 seconds int ...

phpjqueryhtmlcss

Unable to properly zoom in on an image within an iframe in Internet Explorer and Google Chrome

My image zoom functionality works perfectly on all browsers except for IE and Google Chrome when opened inside an iframe. Strangely, it still functions flawlessly in Firefox. How can I resolve this frustrating issue? The image link was sourced from the i ...

javascriptcssgoogle-chromeinternet-exploreriframe

What is the significance of vendor prefixes in the world of CSS3?

While I can see the rationale behind using prefixes for experimental non-official features to avoid conflicts, what is the reason for using them on shadows and similar elements? Shouldn't all vendors be implementing effects consistently according to ...

htmlcssvendor-prefix

The external function in HTML Form's onsubmit attribute is failing to execute

My HTML Form has an onsubmit event that should call a validate() function. Everything works fine when the validate() function is inside a script tag at the end of the body tag. But if the validate() function is in an external JavaScript file, like in thi ...

javascriptjqueryhtmlforms

Using @media queries for mobile and desktop: preventing desktop from displaying mobile styles

I have been working on redesigning a website for mobile using only CSS. I set up media queries to deliver the appropriate CSS for desktop and mobile devices. However, I noticed that when resizing the browser to under 855 pixels, some of the mobile CSS is ...

htmlcssmobilemedia

ngSanitize continues to present plain text rather than rendering HTML code

When working with AngularJS scope, I encountered the need to display certain items as HTML. After some research, I realized that integrating ngSanitize was necessary for this functionality. Here is how I implemented it in my app: <script src="Scripts/a ...

javascripthtmlangularjs

In a React application, the input field unexpectedly loses focus after typing just one character

Has anyone encountered an issue with a dropdown menu causing input field focus to be lost after typing one character? I've attempted setting unique keys for each field, but it hasn't resolved the problem. For reference, here is the link to the p ...

javascripthtmlreactjsreact-hooks

Is it possible to include a while loop for iteration inside a AJAX success function?

I'm currently working on dynamically creating an accordion and populating the content of each tab using AJAX. In my main HTML page, there is an empty div reserved for the accordion: <div id="accordion"></div> The desired outcome is to ha ...

javascriptjqueryhtmlajax

What is the best way to ensure that my Material UI container occupies the entire width and height of the

Struggling to fit my content within a Material UI container in a React project, but it's creating odd margins. Check out the current look: https://i.stack.imgur.com/TaQs2.png Here's how I want it to display with full width: https://i.stack.imgur ...

cssreactjsmaterial-ui