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

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.

94237 次浏览

小开

::before and ::after pseudo-elements are laid inline by default, so width and height won't take effect.

Set it to display: inline-block and it should work.

小开

最佳答案

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/

小开

add display:block;

demo

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

小开

I can get it to work but not using a percentage in width. Pixels work fine

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

小开

Use this if you have image in container or CSS white-space: nowrap; property

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

小开

For me it worked when I used display: block.

小开

If you set the element to position: relative and the pseudo to position: absolute, you can adjust the pseudo width and height in relation to the parent element size.

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


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