resize 按钮不会被伪元素遮盖

textarea默认有个resize样式，效果就是下面这样

读 《css 揭秘》时发现两个亮点：

• 其实这个属性不只适用于 textarea 元素，适用于下面全部元素：

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

• 你能够经过伪元素来覆盖原有的样式，并且不会影响原有的resize功能，可是其余元素不行。

这一点，可能不太好理解，举个例子，咱们用一个span来覆盖右下角的按钮

<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;
}

效果是这样，resize功能失效了：

可是，若是把 span换成伪元素，就是能够的：

<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;
}

resize功能仍是在的：

这就很是神奇了。