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中测试过。
答案 0 :(得分:90)
:before
和:after
伪元素默认为display: inline;
。
将显示值更改为inline-block
而不是宽度&amp;高度生效:
a.infolink::before {
content: '?';
display: inline-block;
background: blue;
color: white;
width: 20px;
height: 20px;
}
答案 1 :(得分:10)
::before
和::after
个伪元素是内嵌的,因此width
和height
不会生效。
将其设为display: inline-block
和it should work。
答案 2 :(得分:1)
添加display:block;
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
时它起作用了。