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功能仍是在的：

這就很是神奇了。