Why Use Animations?
We can add some animation to our web page because it will create a micro-interaction between the user and the web page. It will also attract the user attraction. But if we design a well-defined animation, then it will also attract the user to the content of the web page.
What is CSS Pseudo-Element?
With the help of the pseudo-element, we can add some decorative content to the web page. There are so many pseudo elements available in the CSS. These are ::before, ::after, ::placeholder, ::first-letter, and more. But in this article, we are going to learn about only ::before and ::after.
::Before Pseudo-Element
By utilizing this pseudo-element, we have the capability to add content preceding the element. This pseudo-element is also positioned as the initial child within the chosen element.
Syntax:
selector::before {
content: "Some content or value";
/* Other CSS properties for styling */
}
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.fancy-heading {
position: relative;
font-size: 36px;
color: #333;
}
.fancy-heading::before {
content: "";
position: absolute;
top: 50%;
left: -20px;
transform: translateY(-50%);
width: 10px;
height: 60%;
background: linear-gradient(to bottom, #ff9a8b, #ffc19e);
border-radius: 20px;
}
</style>
</head>
<body>
<h1 class="fancy-heading">Welcome to C# Programming</h1>
</body>
</html>
Output
Explanation:
In the provided code snippet, a vertical bar has been generated on the left-hand side of the heading by utilizing the before pseudo-element. In this scenario, the absolute value has been employed for the position property.
::After Pseudo-Element
By utilizing this pseudo-element, we have the capability to add content following the designated element. Additionally, it serves as the initial child within the chosen element.
Syntax:
selector::after {
content: ""; /* This is required, even if it's an empty string */
/* Other CSS properties to style the ::after element */
}
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.decorated-paragraph {
position: relative;
font-size: 18px;
color: #333;
margin: 20px;
}
.decorated-paragraph::after {
content: "";
display: block;
width: 40px;
height: 3px;
background-color: #3498db;
margin-top: 10px;
}
</style>
</head>
<body>
<p class="decorated-paragraph">This is a paragraph with a decorative element.</p>
</body>
</html>
Output
Explanation:
In the provided code snippet, a horizontal line has been generated following the paragraph by leveraging the pseudo-element. In this instance, the display attribute has been set to block.
What is the Difference between Pseudo-Elements and Pseudo-Classes?
At times, there can be confusion between the pseudo-element and pseudo-class due to their similar names, although they serve distinct purposes.
A pseudo-element serves as a specific keyword integrated with the selector to apply style properties to a particular element. For instance, when utilizing ::first-letter, the style properties are directed to the initial letter within a paragraph or word. It is crucial that a pseudo-element commences with a double colon. To illustrate, let's delve into an example for better comprehension.
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.drop-cap {
font-size: 20px;
line-height: 1.5;
color: #333;
}
.drop-cap::first-letter {
font-size: 60px;
color: #e74c3c;
float: left;
margin: 0 10px 0 0;
}
</style>
</head>
<body>
<p class="drop-cap">Once upon a time, there was a beautiful kingdom...</p>
</body>
</html>
Output
Explanation:
In the provided code snippet, the pseudo-element ```
selector::before {
content: "Some content or value";
/ Other CSS properties for styling /
}
When dealing with a pseudo-class, it represents a keyword that combines with the selector to pinpoint the element's state. Each pseudo-class should commence with a colon symbol.
### Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Output
Explanation:
In this instance, the hover pseudo-class is employed to implement a seamless scaling transition effect on an image upon hovering the mouse over it. The image initiates at its initial size and enlarges by 10% during the hover state. This results in a sophisticated and understated animation that enhances the design with a hint of user engagement.
There are so many pseudo-classes available in CSS, which is used to target all the element. These are as follows.
- Input element states: :checked
- Linguistic states: lang()
- Link related states: :visited
- Media resource states: :playing
- Time-dimensional states: :current
- DOM location states: :first-child
- User-action states: :hover
## Animating with Pseudo-Elements
We have the ability to generate a dynamic webpage using a pseudo-element. In order to produce an animated CSS effect, we need to utilize the following properties:
- Transform:
By utilizing this feature, we have the ability to resize, distort, rotate, and reposition the element. These transformations can be achieved through the transform function, such as rotate() and scale().
- Transition:
By utilizing this feature, we have the ability to specify the animation as the transformation of the element between different states.
- Position:
With this feature, we can specify the placement of an element within a document. It's quite common to adjust the position of the pseudo-element as relative.
- Z-index:
By using this feature, we are able to define the stacking order of the positioned element. Depending on the Z-index value assigned, elements will be stacked on top of each other. Elements with higher Z-index values will overlap those with lower values.
## A look at CSS Transform and Transition
We primarily utilize the CSS transform attribute, which enables us to perform translation (movement), rotation, scaling, and skewing on the element within the web page. This concept can be clarified further through an illustrative example.
### Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Front</h2>
<h2>Back</h2>
</body>
</html>
Output
If we move the cursor over the element, the following result will appear.
## Positioning with Relative and Absolute Properties
There exists a wide array of CSS attributes accessible for managing the layout and placement of elements. Now, let's delve into the concepts of relative and absolute positioning.
- Relative positioning:
We have the ability to manipulate the placement of elements within the standard document flow using the relative positioning property. This concept can be clarified through an illustrative example.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Output
Explanation:
In the provided code snippet, the CSS property position: relative; is applied to adjust the placement of the .box component in relation to its default position within the .container component. This adjustment entails moving the .box element downwards by 30 pixels (top: 30px;) and to the right by 50 pixels (left: 50px;).
- Absolute positioning
By utilizing the absolute positioning property, the specified element is removed from the regular document flow without affecting the page layout. Instead, the element's position is determined relative to the nearest positioned ancestor. This concept can be clarified through an illustrative example.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 class="overlay-text">Example for absolute position</h2>
</body>
</html>
Output
Explanation:
In the preceding code snippet, we've employed the absolute value for the position property. This specific declaration, position: absolute;, is utilized to precisely position the .overlay-text component relative to the .image-container. The content is centralized both horizontally and vertically by leveraging the top, left, and transform attributes. To enhance the visual appeal, a semi-transparent background hue along with padding and border-radius is added to generate a sophisticated overlay visual effect that complements the image.
## Controlling the Stacking Order of Elements using Z-Index
We have the ability to design a webpage where elements are arranged in a stack formation, one on top of the other. The element with the highest stack order will consistently be visible at the forefront. This concept can be clarified through an illustrative example.
### Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Output
Explanation:
In the preceding code, we employed the Z-index attribute to manage the stacking order of three containers. A greater z-index value corresponds to a position closer to the observer, imparting a perception of depth. The property position: absolute; is utilized for the precise placement of these containers inside the designated area. Consequently, a visually stratified appearance is achieved, with the blue container at the forefront, succeeded by the red container, and lastly the green container, irrespective of their sequence in the HTML structure.
## Creating an Animated Button using CSS Pseudo-Elements
Let's generate a dynamic button using CSS pseudo-elements.
### Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Output
Explanation:
In the provided code snippet, we've generated ::before and ::after pseudo-elements to produce horizontal lines. These lines are designed to animate upon hovering over the button. Originating from both the left and right edges of the button, they stretch towards the center with a seamless transition effect. By setting the z-index: -1; property, we guarantee that the lines appear behind the button's content.
When the button is hovered over, the lines smoothly transition to occupy the entire width of the button, resulting in a sophisticated and refined animation that enhances the visual appeal of the button.