不可能在画布上添加伪元素? [英] Impossible to add pseudo element to canvases?

问题描述

因此，我目前正在为HTML5游戏开发地图编辑器，同时，我想向包含用于构建块的缩略图的画布中添加一些伪元素.但是经过一个小时的尝试和谷歌搜索而没有成功，我只是无法使伪元素出现，而是尝试将css应用于div并显示出来，所以我想canvas元素有什么特殊之处吗?

So, I'm currently developing a map editor for a HTML5 game, and while doing so, I wanted to add some pseudo elements to canvases containing thumbnails for building blocks. But after an hour of experimenting and googling without succes, I simply couldn't make the pseudo element appear, I tried applying the css to a div and it appeared, so I guess there is something special going on with the canvas element?

这是一个简单的示例设置: http://jsfiddle.net/ZsHGE/

Here is a simple example iv'e set up: http://jsfiddle.net/ZsHGE/

所以，我转向您，在stackoverflow上的所有认识的人都想得到一个答案，是否不可能在画布元素中添加伪元素?

So, I'm turning to you, the all knowing folks here at stackoverflow, for an answer, is it impossible to add pseudo elements to the canvas element?

HTML: 
<!-- No visible pseudo candy :( -->
<canvas class="gimmeSomePseudoCandy" width="50" height="50"> :( </canvas>

<!-- pseudo candy appears! :) -->
<div class="gimmeSomePseudoCandy"></div>

CSS: 
.gimmeSomePseudoCandy:after { content:"Candy"; }

推荐答案

替换的元素(例如canvas和img)当前不适用于伪元素.

Replaced elements (such as canvas and img) do not currently work with pseudo-elements.

注意.本规范未完全定义:before和:after与替换的元素(例如HTML中的IMG).在以后的规范中将对此进行详细定义.

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

来源

这篇关于不可能在画布上添加伪元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！