Html Question posted in
Some basic documentation can be found here.

Html – 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?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Set .spoiler { background-color: currentColor; } and change it on :hover:

    body {
  color: #333;
}

.spoiler {
  background-color: currentColor;
  transition: background-color .4s;
}

.spoiler:hover {
  background-color: transparent;
}
    - Reduced stage requirement for <span class="spoiler" content="light">light</span>. <br>
- <span class="spoiler" content="Light upgrade 3 is now much stronger: starting effect is 100ms, max level is 20, cost scaling is 2">Light upgrade 3 is now much stronger: starting effect is 100ms, max level is 20, cost scaling is 2</span>.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search