You can use CSS pseudo-elements like :before and :after to add content before or after an element without changing the HTML. However, these pseudo-elements won’t work directly with a <input> field because input elements are self-closing and don’t support :before and :after by default. Let’s discuss these methods in this blog.
Table of Contents:
The :before and :after pseudo-elements need a parent element that can handle the extra added content. The <input> field doesn’t hold any additional content since it is a self-closing tag. That is why pseudo-elements do not work.
You can use methods such as Wrapping the Input Inside a Parent Element, using a label Element with :before and :after, and using a Pseudo-Element on a span inside the Wrapper for this purpose. Let’s discuss them below.
You can make the input field get placed inside the <div> or <label> element by applying the pseudo-elements to the wrapper. You can actually place the input field inside the <div> and apply the :before to the wrapper instead. You can also add the icon or label in the input field.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input with Pseudo-Elements</title>
<style>
.input-wrapper {
position: relative;
display: inline-block;
}
.input-wrapper:before {
content: "🔍"; /* Unicode search icon */
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: gray;
}
.input-wrapper input {
padding-left: 30px; /* Adjust padding to accommodate the icon */
height: 30px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="input-wrapper">
<input type="text" placeholder="Search here">
</div>
</body>
</html>
Output:
Explanation: In this code, we added the icon to the input field. To display the icon before the input field, you can use the :before pseudo-element. This element places the icon to the left and vertically aligned in the center. You can use padding-left: 30px for the icon space.
Method 2: Use a Label Element with :before and :after
You can use this method to create some icons or text before the input field. Since the labels are related to the input field, the user clicks on the label to focus on the input fields, which makes it more accessible.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input with Label</title>
<style>
.input-label {
position: relative;
display: inline-block;
}
.input-label:before {
content: "✉️"; /* Unicode envelope icon */
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.input-label input {
padding-left: 30px;
height: 30px;
font-size: 16px;
}
</style>
</head>
<body>
<label class="input-label">
<input type="email" placeholder="Enter your email">
</label>
</body>
</html>
Output:
Explanation: Using this code, the input box with the placeholder is created and the envelope icon is added to the left side of the input field using :before and it is positioned using position: absolute. You can set the padding property to the input field to make sure the text doesn’t overlap the icon. The label element makes it more accessible since it provides more focus on the input field.
Method 3: Using a Pseudo-Element on a Span Inside the Wrapper
You can use the span element, which is placed inside the wrapper, to add the icon near the input field. For the :before pseudo-element, the span acts as the target for adding an icon in the input field.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input with Span</title>
<style>
.input-container {
position: relative;
display: inline-block;
}
.input-decorator:before {
content: "📅"; /* Unicode calendar icon */
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: gray;
}
.input-container input {
padding-left: 30px;
height: 30px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="input-container">
<span class="input-decorator"></span>
<input type="date">
</div>
</body>
</html>
Output:
Explanation: You can use the <span> and CSS for creating the icon near the input field. In this code, .input-decorator:before used for creating the icon in the input field. This element places the icon to the left and vertically aligned in the center. You can use padding-left: 30px for the icon space.
Conclusion
The above-discussed method is the most effective to use :before or :after pseudo-element to an input field using CSS. You can use methods such as wrapping the input inside a parent element, using a label element with :before and :after and using a pseudo-element on a span inside the wrapper for this purpose. This might indirectly improve the design and functionality of the webpage.
These articles provide a comprehensive introduction to the core elements of frontend development, including HTML and CSS.-
How to affect other elements when one element is hovered in CSS – Shows creative hover effects that influence multiple components.
How to remove the space between inline-block elements in HTML – Demonstrates removing gaps using comments, font-size tricks, or flexbox.
How to set position absolute but relative to parent in CSS – Clarifies positioning context in CSS layout hierarchy.
What are valid values for the id attribute in HTML – Shows examples of legal and illegal id values.
Where should I put script tags in HTML markup – Covers how script placement affects page load speed and rendering.
Why should we avoid use of tables for layout in HTML – Shows how tables complicate accessibility and screen reader support.
Can you nest HTML forms – Shows alternatives like using multiple sections in one form.
What is the difference between properties and attributes in HTML – Shows how changes to properties may not reflect attributes.
Inline event handler attributes are bad in HTML – Encourages using addEventListener for maintainable code.
1. Can you directly use :before or :after on input fields?
No, the input fields are self-closing, and they do not support :before or :after directly.
2. How can you still use pseudo-elements with input fields?
You can use the pseudo-elements with input fields by wrapping them inside the <div> or <label> elements.
3. What can you add with :before or :after?
You can add some decorative content like icons, text or visual indicators with :before or :after elements.
4. Why use a wrapper for input fields?
You can style indirectly by keeping the input field functional and accessible.
5. Is using a label element better for accessibility?
Yes, using the <label> element with the pseudo-elements for better accessibility. Since the label is associated with input fields.