宽度和高度似乎不起作用:在伪元素之前

Question

这是一个小提琴.

<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伪元素实际上是display: inline;默认.

将显示值更改inline-block为宽度和高度生效:

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

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

Answer 2

::before和::after伪元素默认情况下,内联铺设,所以width并height不会生效.

设置它display: inline-block,它应该工作.

Answer 3

如果容器中有图像或 CSS空白，请使用此选项：nowrap; 财产

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