CSS text background

Hello fellows developers,

As a CSS enthusiast I'm always trying to replicate designs I see using CSS.

Today I wanted to create a text background for a paragraph.
I used codepen as always(God Bless Codepen).

At first I added the necessary HTML I knew I wanted on the page:

<section>
  <span class="text-background">2021</span>
  <p>
    “Do the hard jobs first. The easy jobs will take care of themselves.”
Dale Carnegie
  </p>
</section>

Now I want my section to be centered on the screen, a dark background and some nice visuals for the body and for that I've added some CSS:

body {
  margin: 0;
  height: 100vh;
  width: 100%;
  background: #454545;

  display: grid;
  place-items: center;
  text-align: center;
}

For my particular design I want to have all the elements centered so I need to center everything inside the section also:

section {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}

The relative positioning will help me center and arrange the elements inside without having to mess with z-index(do to the fact of html elements order).

Display grid and Place-items center will center the items inside the section.

And the last and most important thing to do is to add position absolute to our text elements and some styling to look nice:

.text-background {
  position: absolute;
  font-size: 142px;
  color: #3d3d3d;
}

p {
  position: absolute;
  font-size: 20px;
  color: #eee;
}

The final result:

Thank you for reading this article and I'm curios if you have another method to achieve this result.