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中测试过。
:before
和:after
伪元素实际上是display: inline;
默认情况下。
将显示值更改为inline-block
而不是宽度和高度生效:
a.infolink::before {
content: '?';
display: inline-block;
background: blue;
color: white;
width: 20px;
height: 20px;
}
::before
和::after
伪元素默认为内联,因此width
和height
不会生效。
设置为display: inline-block
和it should work。
添加display:block;
p > a.infolink::before {
display:block;
content:'?';
background: blue;
color: white;
width: 20ex;
height: 20ex;
border:1px solid #000;
}
我可以让它工作但不使用宽度的百分比。像素工作正常
visibility: visible;
content: "stuff";
min-width: 29px;
width: 100%;
float: left;
position: relative;
top: -15px;
left: 0;
如果您在容器或CSS空白区域中有图像,请使用此选项:nowrap;属性
body::before{
content:url(https://i.imgur.com/LJvMTyw.png);
transform: scale(.3);
}