Open In App

Various tricks for :before pseudo elements using position property in CSS

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to use CSS position property to manipulate the position of the :before pseudo elements. The position: relative property is relative to its parent. It has left, right, top, bottom properties that help to position the coordinates of the elements. Also, we will know to manipulate the position of the :before pseudo elements using the position property.

Syntax:

position: static|relative|absolute|fixed|sticky

The position property can be used to specify the distance of an HTML element from the edge of the viewport. Many websites use background color before the navigation bar. We can use the background color to only cover the width and height of the navigation bar using Position: relative.

Approach: We will use all the required lists for the navbar in the HTML file. Then, we will provide the required padding, margin to design the lists using CSS. Using :before selector, we will provide the background color, to only cover the width and height of the navigation bar. We will set position: relative in the navigation bar to set the background color. 

Example 1: The below example illustrates the implementation of the above approach that uses the relative property value to set the background color to cover the width and height of the navigation bar.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
      * {
          padding: 0px;
          margin: 0px;
          box-sizing: border-box;
      }
 
      /* Providing bg colour before navbar */
      #navbar::before {
          content: "";
          background-color: grey;
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: -1;
          opacity: 0.1;
      }
 
      /* Navbar Designing */
      #navbar {
          overflow: auto;
 
          /* Background color to only cover
          the width and height of the
          navigation bar */
          position: relative;
      }
 
      #nav-container {
          float: right;
          display: flex;
      }
 
      #nav-container ul {
          display: flex;
          flex-direction: row;
      }
 
      #nav-container ul li {
          list-style: none;
          padding: 16px 16px;
      }
 
      #nav-container ul li a {
          text-decoration: none;
          color: black;
          font-size: 1.5rem;
      }
    </style>
</head>
 
<body>
    <header id="navbar">
        <nav id="nav-container">
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Locations</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Reach Us</a>
                </li>
            </ul>
        </nav>
    </header>
</body>
</html>


Output:

We can provide a background image before the home page or the section on our website. After adding a heading, paragraph, or adding a button within the section, the position: relative property positions the background image to only cover the width and height of the section.

Approach: We will use the heading and add some paragraphs after the heading using HTML. Using flex properties, we will center the elements within the section and give a better design using CSS. Using :before selector, we will provide the background image, to only cover the width and height of the home page. We will set position: relative on the home page to set the background image.

Example 2: The below example illustrates the implementation of the above approach that uses the relative property value to set the background image to cover the width and height of the home page.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Tricks in CSS</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <style>
      * {
          padding: 0px;
          margin: 0px;
          box-sizing: border-box;
      }
 
      /* Providing bg colour before navbar */
      #navbar::before {
          content: "";
          background-color: grey;
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: -1;
          opacity: 0.1;
      }
 
      /* Navbar designing*/
      #navbar {
          overflow: auto;
          position: relative;
      }
 
      #nav-container {
          float: right;
          display: flex;
      }
 
      #nav-container ul {
          display: flex;
          flex-direction: row;
      }
 
      #nav-container ul li {
          list-style: none;
          padding: 16px 16px;
      }
 
      #nav-container ul li a {
          text-decoration: none;
          color: black;
          font-size: 1.5rem;
      }
 
      /* Home page */
      #home-id {
          display: inline-block;
          width: 100vw;
          height: 64vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
 
          /* To position the background
          image before section */
          position: relative;
      }
 
      /* Home background image*/
      #home-id::before {
          content: "";
          background: url(
          no-repeat center center/cover;
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: -1;
          opacity: 0.9;
      }
 
      .center {
          text-align: center;
      }
 
      /* Home section button */
      #home-id button {
          padding: 10px;
          font-size: 0.8rem;
          font-weight: bold;
          letter-spacing: 1px;
          border-color: transparent;
          margin-top: 180px;
      }
    </style>
</head>
 
<body>
    <header id="navbar">
        <nav id="nav-container">
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Locations</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Reach Us</a>
                </li>
            </ul>
        </nav>
    </header>
    <section id="home-container">
        <div id="home-id">
            <button>Click to know more</button>
        </div>
    </section>
</body>
</html>


Output:

 

We can provide the same or multiple images to the container. Using position: relative, we can manipulate images to set only the width and height of the container.

Approach: We will use 3 boxes using and set the width and height of the boxes using CSS. Using :before selector, we will add some images, and to cover the container, we will use position: relative.

Example 3: The below example illustrates the implementation of the above approach that uses position relative to set the background image cover the containers.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Tricks in CSS</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <style>
        #boxes {
            display: flex;
            height: 93vh;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
         
        #box-1 {
            border: 2px solid green;
            width: 20vw;
            height: 31vh;
            margin: 10px;
            /* To make the image
                as a coverage to the 3 boxes */
            position: relative;
        }
         
        #box-1:before {
            content: "";
            background-image: url(
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
 
<body>
    <section id="boxes-container">
        <div id="boxes-all">
            <div id="boxes">
                <div id="box-1"> </div>
                <div id="box-1"> </div>
                <div id="box-1"> </div>
            </div>
        </div>
    </section>
</body>
</html>


Output:

output image



Last Updated : 28 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads