width and height doesn't seem to work on :before pseudo-element

Question

Here is a fiddle.

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

and

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

The '?' appears but clearly does not have 20ex size. Why not? Tested in Firefox and Chrome.

Answer 1

Note: The ::before and ::after pseudo-elements are actually laid display: inline; by default.

Change the display value to inline-block for the width & height to take effect while maintaining inline formatting context.

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

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