星期二, 6月 06, 2017

[HTML] img 標籤無法使用 ::after ::before

img 標籤無法使用::after,::before,不會有任何效果。

主要是因為img是void element,其定義跟範例如下:
Void elements can’t have any contents (since there’s no end tag, no content can be put between the start tag and the end tag).
Code Example

另外void element所以 img可以不用end tag ,<img>即可。

下面是不正確的void element。

<img>this is invalid img tag</img>

下次如果為了樣式要在img tag塞before/after pseudo element,還是乖乖用個span包住他吧。

Void elements
area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr
Raw text elements
escapable raw text elements
Foreign elements
Elements from the MathML namespace and the SVG namespace.
Normal elements 
All other allowed html elements are normal elements.