Pseudo Class - hover, focus, active and Pseudo Element - before, after

Pseudo-classes in CSS are used to define the special state of an HTML element. They allow you to apply styles to elements based on user interactions or specific conditions. Three common pseudo-classes are :hover, :focus, and :active, each serving a different purpose. Let’s explore these pseudo-classes with HTML examples.

:hover:

The :hover pseudo-class is used to apply styles to an element when the mouse pointer is placed over it. This is commonly used for interactive elements like links or buttons. Here’s an example:


<!DOCTYPE html>
<html>
<head>
  <style>
    a:hover {
      color: red;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <a href="#">Hover over me</a>
</body>
</html>

In this example, when you hover your mouse over the link, the text color changes to red, and an underline is added.

:focus:

The :focus pseudo-class is used to style an element when it gains focus, typically through keyboard navigation or clicking. This is commonly used for form elements, such as input fields. Here’s an example:


<!DOCTYPE html>
<html>
<head>
  <style>
    input:focus {
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <input type="text" placeholder="Click to focus">
</body>
</html>

In this example, when you click on the input field, it gains focus, and a blue border is applied to it.

:active:

The :active pseudo-class is used to style an element when it is being activated, like when you click on a link or button. It represents the moment when a mouse button is clicked on an element. Here’s an example:


<!DOCTYPE html>
<html>
<head>
  <style>
    button:active {
      background-color: green;
      color: white;
    }
  </style>
</head>
<body>
  <button>Click me</button>
</body>
</html>

In this example, when you click the button, it turns green with white text while it’s being clicked.

::before and ::after

These pseudo-classes are a powerful way to enhance the user experience and make your website more interactive and visually appealing. You can apply various CSS styles to create the desired effects based on user interactions.

Pseudo-elements in CSS allow you to style a specific part of an element. The ::before and ::after pseudo-elements are commonly used to insert content before or after the content of an element, respectively. They are often used to add decorative elements or generate additional content dynamically.

Here’s an example of how you can use ::before and ::after pseudo-elements:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Basic styling for the container */
    .container {
      position: relative;
      width: 200px;
      height: 100px;
      background-color: #f0f0f0;
      margin: 50px;
    }

    /* Styling for the ::before pseudo-element */
    .container::before {
      content: "Before";
      position: absolute;
      top: 10px;
      left: 10px;
      color: #ffffff;
      background-color: #333333;
      padding: 5px;
    }

    /* Styling for the ::after pseudo-element */
    .container::after {
      content: "After";
      position: absolute;
      bottom: 10px;
      right: 10px;
      color: #ffffff;
      background-color: #333333;
      padding: 5px;
    }
  </style>
</head>
<body>

  <div class="container">
    Content of the container
  </div>

</body>
</html>

In this example, we have a <div> element with the class container. The ::before pseudo-element is used to insert content before the actual content of the container, and the ::after pseudo-element is used to insert content after the actual content. The content property is used to specify the text content for these pseudo-elements.

You can customize the styles and positioning according to your needs. Pseudo-elements are powerful for adding decorative elements without cluttering your HTML with extra markup.

Previous
CSS Position - static, relative, absolute, sticky, fixed
Next
CSS Selector-Child, Sibling, Attribute, :first-child, nth-child(2n)