How to add CSS behind text in Astra

Question

I'm new to Wordpress but I'm trying to create a green squint colored box behind a line of text. Just like in the demo website here but using Gutenberg instead of Elementor.

It would be great if it could be re-used later on. What I tried so far was to follow the steps in this tutorial:

• Create a parallelogram here
• In WordPress add the name "shapeone" to the Cover object in "Additional CSS classes"
• Click "Preview" in WordPress, then "Customize" and add the custom CSS from the shape in "Astra > Customizing > Additional CSS":

.shapeone {
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

This is the result:

How is it possible to add this green colored box behind the text? And make it move with the text and not cut of the text?

Answer 1

You can achieve it with using pseudo-element before. Here is some sample code:

#banner { 
  position: relative;
}

#banner::before {
  position: absolute;
  content: "";
  top: 1rem;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background-color: green;
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  z-index: -1;
}

You can see it in action here - https://codepen.io/lukaszpiotrluczak/pen/mdKzrva

So to conclude:

1. to container element you need to add position: relative
2. you create ::before element and give it position: absolute, content: "" and z-index: -1
3. you control position of this pseudoelement with left, right, top, bottom
4. you give this pseudoelement background-color and clip

Of course there is a chance you will need to play with z-index etc.

If you provide link to page I can give you exact css to put.