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

這就非常神奇了。