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

user_458742 0
Viewed 90466

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.

pseudo-element css
7 Answers

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);
}
user_111076120

For me it worked when I used display: block.

user_134135800

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%
}
user_60703520
Related