How can I wrap span::after?

I have these styles:

.spoiler {
    pointer-events: auto;
    position: relative;
}

.spoiler::after {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgb(20, 20, 20);
    transition: opacity 250ms;
}

.spoiler:hover::after {
    opacity: 0.25;
}

It works fine when text is not wrapped like here

But if it’s wrapped it doesn’t work properly

- Reduced stage requirement for <span class="spoiler">light</span>. <br>
- <span class="spoiler">Light upgrade 3 is now much stronger: starting effect is 100ms, max level is 20, cost scaling is 2</span>.

So how can I cover the entire span with ::after?

>Solution :

You need to "blockify" the span by adding a suitable display value.

Perhaps, inline-block or inline-flex?

.spoiler {
  pointer-events: auto;
  position: relative;
  display: inline-block;
  outline: 1px solid blue;
  margin-bottom: 1em;
  ;
}

.spoiler::after {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  content: "";
  background-color: lightblue;
  transition: opacity 250ms;
}

.spoiler:hover::after {
  opacity: 0.25;
}

<div>Reduced stage requirement for <span class="spoiler">light</span>.
  <br>
  <div><span class="spoiler">Light upgrade 3 is now much stronger: starting effect is 100ms, max level is 20, cost scaling is 2</span>.</div>