HTML/CSS

After & Before In CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>After & Before In CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Start About -->
    <div class="about">
      <div class="container">
        <h2 class="special-heading">About</h2>
        <p>Explore more at CodeZillaYE and transform your coding skills!</p>
        <div class="about-content">
          <div class="image">
            <img decoding="async" src="images/about.jpg" alt="" />
          </div>
          <div class="text">
            <p>
              Unlock the power of coding with CodeZillaYE! Your ultimate
              resource for mastering frontend and backend development. Dive into
              detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS,
              JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with
              our educational articles and enhance your skills with practical
              guides. Perfect for beginners and seasoned developers alike. Join
              CodeZillaYE today and elevate your coding journey!
            </p>
            <hr />
            <p>
              Unlock the power of coding with CodeZillaYE! Your ultimate
              resource for mastering frontend and backend development. Dive into
              detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS,
              JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with
              our educational articles and enhance your skills with practical
              guides. Perfect for beginners and seasoned developers alike. Join
              CodeZillaYE today and elevate your coding journey!
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- End About -->
  </body>
</html>

/* Start Variables */
:root {
    --main-color: #e91e63;
    --secondary-color:#009688;
    --section-padding: 60px;
    --section-background: #f6f6f6;
    --main-duration: 0.5s;
}

/* End Variables */
/* Start Global Rules */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Work Sans", sans-serif;
}

.container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/* Small */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/* Medium */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

/* Large */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/* End Global Rules */
/* Start Components */
.special-heading {
    color:#222;
    background-color: var(--secondary-color);
    font-size: 100px;
    text-align: center;
    font-weight: 800;
    letter-spacing: -3px;
    margin: 0;
    padding-bottom: 1rem;
    text-decoration:underline;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.special-heading+p {
    margin: -30px 0 0;
    font-size: 20px;
    text-align: center;
    /* color:var(--secondary-color); */
}

@media (max-width: 767px) {
    .special-heading {
        font-size: 60px;
    }

    .special-heading+p {
        margin-top: -20px;
    }
}

/* End Components */

/* Start About */
.about {
    padding-top: var(--section-padding);
    padding-bottom: calc(var(--section-padding) + 60px);
    background-color:#7955485e;
}

.about .about-content {
    margin-top: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media (max-width: 991px) {
    .about .about-content {
        flex-direction: column;
        text-align: center;
    }
}

.about .about-content .image {
    position: relative;
    width: 250px;
    height: 375px;
}

@media (max-width: 991px) {
    .about .about-content .image {
        margin: 0 auto 60px;
    }
}

.about .about-content .image::before {
    content: "";
    position: absolute;
    background-color:var(--secondary-color);
    width: 50px;
    height: calc(100% + 80px);
    top: -40px;
    left: -20px;
    z-index: -1;
}

.about .about-content .image::after {
    top: -40px;
    content: "";
    position: absolute;
    width: 220px;
    height:420px;
    border-left: 40px solid var(--main-color);
    border-bottom: 40px solid var(--secondary-color);
    z-index: -1;
    right: -150px;
}

@media (max-width: 991px) {

    .about .about-content .image::before,
    .about .about-content .image::after {
        display: none;
    }
}

.about .about-content .image img {
    max-width: 100%;
}

.about .about-content .text {
    flex-basis: calc(100% - 500px);
  
}

.about .about-content .text p:first-of-type {
    font-weight: bold;
    line-height: 2;
    margin-bottom: 50px;
    color: var(--main-color);
    background-color: var(--section-background);
    padding: 1rem;
    border-radius: 22px;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    -ms-border-radius: 22px;
    -o-border-radius: 22px;
}

.about .about-content .text hr {
    width: 50%;
    display: inline-block;
    border-color: var(--main-color);
}

.about .about-content .text p:last-of-type {
    line-height: 2;
    color: #222;
    background-color: var(--section-background);
    padding: 1rem;
    border-radius: 22px;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    -ms-border-radius: 22px;
    -o-border-radius: 22px;
}

/* End About */