Css 垂直对齐：在元素之后

我试过各种各样的回答，但没有成功

我需要垂直对齐after元素：

content: "";
width: 30px;
height: 15px;
background: transparent url('/img/test.png') no-repeat;
float: right;
border: 1px solid red;

这不起作用：

vertical-align: middle;

也没有：

vertical-align: -50%;

---

从链接到的答案中，

垂直对齐：继承垂直对齐：顶部时，元素上的code>对我有效，似乎没有其他东西适合我
 您可以在父元素上使用
行高
，在伪
：after
上使用
显示：内联块

.box {
  width: 100px;
  height: 100px;
  background: #CCC;
  line-height: 100px;
  text-align: center;
}
.box:after {
  content: "";
  width: 30px;
  height: 15px;
  background: transparent;
  border: 1px solid red;
  display: inline-block;
}

演示：
Float和vertical align不能一起工作：）啊，谢谢，不幸的是，当我取下这个并使用内联显示时，它消失了。