注意：默认情况下，::before和::after伪元素实际上是display: inline;。
将显示值更改为inline-block，以使宽度和高度生效，同时保持内联格式上下文。

a.infolink::before {
    content: '?';
    display: inline-block;
    background: blue;
    color: white;
    width: 20px;
    height: 20px;
}

http://jsfiddle.net/C7rSa/3/

默认情况下，::before和::after伪元素是内联放置的，因此width和height不会生效。
设置为display: inline-block和it should work。

如果容器或CSS**空白中有图像，请使用此选项：nowrap;**属性

body::before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
}

如果将element设置为position: relative，将pseudo设置为position: absolute，则可以根据父元素的大小调整伪 width 和 height。

div {
    position: relative;
    width:400px;
    height:200px;
    padding: 0;
}

 div::before {
    position: absolute;
    width:100%;
    height: 100%
}

对我来说，当我使用display: block时，它就工作了。

添加display:block;
demo

p > a.infolink::before {
    display:block;
    content:'?';
    background: blue;
    color: white;
    width: 20ex;
    height: 20ex;
    border:1px solid #000;
}

我可以让它工作，但不使用宽度的百分比。像素工作正常

visibility: visible;
content: "stuff";
min-width: 29px;
width: 100%;
float: left;
position: relative;
top: -15px;
left: 0;

我知道这不能完全回答问题，但对我来说唯一有效的解决方案是使用font-size属性。

a.infolink::before
{
    content: '?';
    background: blue;
    color: white;
    font-size: 20ex;
}

<p>foo <a class="infolink" href="#">bar</a> baz</p>