Why does the filter property effect the width of the ::after element?

Question

I am just working a game and was creating a custom button tooltip and observed something very string.

Here is first snippet with out filter

button{
  padding: 5px;
}
button:hover::after{
  content: "A quick brown fox jumped over a lazy dog";
   position: absolute;
   left: 60px;
   background: gray;
   color:white;
}

<button><span>Text</span></button>

Snippet with filter

button{
  padding: 5px;
  filter: brightness(0.8)
}
button:hover::after{
  content: "A quick brown fox jumped over a lazy dog";
   position: absolute;
   left: 60px;
   background: gray;
   color:white;
}

<button><span>Text</span></button>

When I use filter: brightness on button the text of ::after started wrapping. I can't think of any relation between filter and wrapping of ::after. I know I can fix that using white-space:nowrap. But I want to know the reason why the text started wrapping when I used filter()

first duplicate to explain what is happening with filter and second duplicate to explain the behavior of position:absolute and the wrapping — Temani Afif, Jan 25 '20 at 13:26

score 0 · Answer 1 · answered Jan 25 '20 at 12:34

When you set filter: brightness(0.8) to the button it becomes the positioning context for the ::after pseudo-element instead of the body. It's similar to setting position other than static to the button.

In this example, I've removed the filter, but added position: relative to the button, and the result is the same:

button{
  position: relative;
  padding: 5px;
}
button:hover::after{
  content: "A quick brown fox jumped over a lazy dog";
   position: absolute;
   left: 60px;
   background: gray;
   color:white;
}

<button><span>Text</span></button>

Why does the filter property effect the width of the ::after element?

1 Answers1