```css
.n-bullet-silhouette-1-004077::before {
  background-image: url("/wp-content/themes/nonverbis/assets/img/cliparts/woman-silhouette/004077/silhouette_1.svg");
  background-repeat: no-repeat;
  display: inline-block;
  content: "";
  height: 3rem;
  max-width: 3rem;
  width: 100%;
  float: left;
  margin-right: 10px;
}

.n-af8170 {
  color: black;
  font-style: italic;
  background: #af8170;
  background: linear-gradient(141deg, #af8170 69%, #f9fafa 100%);
  font-weight: bold;
  border-radius: 5% 50% 50% 50% / 50% 50% 50% 50%;
}
```

```html
<p class="n-bullet-silhouette-1-004077 n-af8170">Lorem ipsum</p>
```

[![enter image description here](https://i.stack.imgur.com/XzDvT.png)](https://i.stack.imgur.com/XzDvT.png)

With reference to the picture, I'd like the background for which .n-af8170 is responsible for be shown only above the text. That is not to cover the area of the before pseudo element. How can I achieve this?