：在伪元素之前不在输入元素上显示图像

Question

我希望在文字之前出现一张图片＆＃34;评论＆＃34;但仍在按钮内。有可能做那样的事吗？

实时版：http://jsfiddle.net/yGk9Z/

HTML

<input name="commit" type="submit" value="Comment">

CSS

input[type=submit]:before {
    content: url("comment.png"); } 

提前致谢：）

Answer 1

您可以将其用作背景图片：

input[type=submit] {
  background-image: url("http://i.imgur.com/X1UMz.png");
  background-repeat: no-repeat;
  padding-left: 25px;
}

Answer 2

或者您可以改为使用按钮：

<button>Comment</button>​

button:before{content: url("http://i.imgur.com/X1UMz.png")}; 

Answer 3

改为使用background-image和左padding：

input[type=submit]{
   background: #fff url(comment.png) no-repeat left center;
   padding-left: 32px; /* insert your actual img-width + some pixel space */
}