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

时间:2013-12-31 14:06:28

标签: css pseudo-element

Here是一个小提琴。

<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中测试过。

6 个答案:

答案 0 :(得分:90)

:before:after伪元素默认为display: inline;

将显示值更改为inline-block而不是宽度&amp;高度生效:

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

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

答案 1 :(得分:10)

默认情况下,

::before::after个伪元素是内嵌的,因此widthheight不会生效。

将其设为display: inline-blockit should work

答案 2 :(得分:1)

添加display:block;

demo

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

答案 3 :(得分:0)

我可以让它工作但不使用宽度百分比。像素工作正常

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

答案 4 :(得分:0)

如果容器中或CSS中有图像空白:nowrap; 属性

,请使用此选项
body::before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
}

答案 5 :(得分:0)

对我来说,当我使用 display: block 时它起作用了。