css - 宽度和高度似乎不适用于 :before pseudo-element

Question

Here是一把 fiddle 。

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

和

a.infolink::before
{
    content: '?';
    background: blue;
    color: white;
    width: 20ex;
    height: 20ex;
}

“？”出现但显然没有 20ex 尺寸。为什么不？在 Firefox 和 Chrome 中测试。

Answer 1

注意:::before 和 ::after pseudo-elements实际上是默认放置display: inline;。

将显示值更改为 inline-block 以使宽度和高度生效，同时保持内联格式化上下文。

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

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