CSS选择最后一个没有文字的孩子

Question

如何编写一个CSS选择器，只有在没有文本后面的情况下才能选择元素的最后一个子元素？

在这个例子中

<button><span class="icon"></span></button>
<button><span class="icon"></span>Caption</button>

我想给按钮内的每个图标一个5px的右边距，除非按钮内的图标没有任何内容。

button .icon             {margin-right: 5px;}
button .icon:last-child  {margin-right: 0px;}

...不起作用，因为显然是文字＆＃34; Caption＆＃34;不是元素，因此第二个选择器选择两个图标。我希望它只选择第一个。我可以把'＃34; Caption＆＃34;在<span>中，但是没有纯CSS方式吗？