before 疑似要素で width と height が機能しないようです。

質問

ここで はバイオリンです。

<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でテストしています。

どのように解決するのですか？

注意 ::before と ::after 擬似要素 は、実際には敷設されている display: inline; になります。

表示値を inline-block に変更し、インラインフォーマットコンテキストを維持したまま、width & height が有効になるようにします。

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

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