The resize button is not obscured by pseudo elements

textarearesizeThere is a style by default , the effect is as follows

When reading "CSS Demystified", I found two highlights:

• In fact, this attribute applies not only to the textareaelement , but to all of the following elements:

elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes

• You can override the original style with pseudo elements without affecting the original resizefunction, but other elements cannot.

This may not be easy to understand. For example, we use a spanbutton to cover the lower right corner

<div>
  div
  <span>
    span
  </span>
</div>

div {
  width:100px;
  height:100px;
  background-color:pink;
  resize:horizontal;
  overflow:hidden;
  position:relative;
}
span {
  content:'';
  display:block;
  width:20px;
  height:20px;
  background-color:yellowgreen;
  position:absolute;
  right:0;
  bottom:0;
}

The effect is this, the resizefunction fails:

However, if you spanreplace pseudo-elements, it works:

<div>
  div
  <span>
    span
  </span>
</div>

div {
  width:100px;
  height:100px;
  background-color:pink;
  resize:horizontal;
  overflow:hidden;
  position:relative;
}
div::after {
  content:'';
  display:block;
  width:20px;
  height:20px;
  background-color:yellowgreen;
  position:absolute;
  right:0;
  bottom:0;
}

resizeThe function is still there:

This is very magical.