Css 如何防止before psuedo元素的内容溢出其宽度和高度?

Css 如何防止before psuedo元素的内容溢出其宽度和高度?,css,Css,如何防止psuedo元素之前的内容溢出其宽度和高度? 此:psuedo元素之前的CSS样式为: content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAASCAYAAABFGc6jAAAAAXNSR0IArs4c6QAAAc1JREFUOBHtlE8oBHEUx9+bYVknFMrBRcmJk9pEuXLWXhQHJ/vHvyJOrJKLsGxbW3KghDMOTiiSE22UIncuFLLszPNm1/xm5mftn

如何防止psuedo元素之前的
内容溢出其宽度和高度?

:psuedo元素之前的CSS样式为:

content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAASCAYAAABFGc6jAAAAAXNSR0IArs4c6QAAAc1JREFUOBHtlE8oBHEUx9+bYVknFMrBRcmJk9pEuXLWXhQHJ/vHvyJOrJKLsGxbW3KghDMOTiiSE22UIncuFLLszPNm1/xm5mftn4uT32W+n/e+772Z329mEKRFgfFaoEQPELowujQrpbMi+UZbAbReUJU1XFk8t5uLTKBYrBgur2dAex/jmApAG2Yu15WCY/WgJdaBkjyIl4bbco1iBGhnR4XLq00gmmDkIfgAqmtKNmdi8o82gPZxAgTpIYBb0OE5lr3pJzo67WNjt0gihDAyfy84m9CTq5yuSVkQX0EtG0SvV5NLFAoul4BO1t0j6gAV67IxE1NguJPj7VaO9nBl7tFiSymg3fXz5tVZIbrF6PSLxVmUTiFHlpQLB9vAOKMuG7PEZydnJgpOVvGZtjiyCjw52AZ8RtRsY0aqpIHhoCNmgApxjCwdirj+2iS0KXRq41rxJqfD+icUle4i+YbeuLnb9Ga9urARw+Ebw0P+ES/o2o/X+Jf6MyXvIUaHJHlEI6IyoXMLT+o7yu37dpCCeXslY2GDpOJC8H9QIbvl8P7h1hk/wvxXwmbN7zeVKsAPfiJcAMSkrUFmiRgHdB+IZHX5PtfFBf8m0r3DX43yh79W6TLRAAAAAElFTkSuQmCC');
position: absolute;
left: 0;
top: 0;
transform: translate(-120%,-10%);
width: 1em;
height: 1em;
(此psuedo元素所属的
div
具有
位置:相对;

编辑

附言:我不想更改psuedo元素的
内容。是否仍有可能

编辑


我希望伪元素是
16px x 16px
而不剪切图像

删除
:在
伪元素之前,使用大小为
16px的背景图像

blockquote{
保证金:0;
最大宽度:130px;/*仅演示*/
左侧填充:1.5em;/*引号图标空间*/
背景:0.1em/16px无重复url数据:数据:图像/png;Bas64,数据:数据:数据:数据:图像/png;Bas64,数据数据:图像/png;Bas64,数据:数据:图像/png;基础64,数据,数据,数据:数据:图像/png;基础64,数据,数据,数据,数据,数据,数据,数据,数据,数据,数据,数据收集,4个国家,4个6个数据,6个,6个数据,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个L2.一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的非非非非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的ZEVKSAPFIJCAMSKRUFMIRGHDB+IZHX5PtfFBf8M0R3DX43YH79W6TLRAAAAELFTKSUQMCC');
}
Charlie,在lorem ipsum的书中,如果你用“溢出:隐藏”这个词,他有一条很好的狗叫
在:before元素将不再溢出,并将切断部分图像。否则,最好将图像用作背景图像,并将背景图像的宽度设置为100%。稍微调整元素的高度和宽度,使其处于正确的比例

  .box:before {
      content: '';
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAASCAYAAABFGc6jAAAAAXNSR0IArs4c6QAAAc1JREFUOBHtlE8oBHEUx9+bYVknFMrBRcmJk9pEuXLWXhQHJ/vHvyJOrJKLsGxbW3KghDMOTiiSE22UIncuFLLszPNm1/xm5mftn4uT32W+n/e+772Z329mEKRFgfFaoEQPELowujQrpbMi+UZbAbReUJU1XFk8t5uLTKBYrBgur2dAex/jmApAG2Yu15WCY/WgJdaBkjyIl4bbco1iBGhnR4XLq00gmmDkIfgAqmtKNmdi8o82gPZxAgTpIYBb0OE5lr3pJzo67WNjt0gihDAyfy84m9CTq5yuSVkQX0EtG0SvV5NLFAoul4BO1t0j6gAV67IxE1NguJPj7VaO9nBl7tFiSymg3fXz5tVZIbrF6PSLxVmUTiFHlpQLB9vAOKMuG7PEZydnJgpOVvGZtjiyCjw52AZ8RtRsY0aqpIHhoCNmgApxjCwdirj+2iS0KXRq41rxJqfD+icUle4i+YbeuLnb9Ga9urARw+Ebw0P+ES/o2o/X+Jf6MyXvIUaHJHlEI6IyoXMLT+o7yu37dpCCeXslY2GDpOJC8H9QIbvl8P7h1hk/wvxXwmbN7zeVKsAPfiJcAMSkrUFmiRgHdB+IZHX5PtfFBf8m0r3DX43yh79W6TLRAAAAAElFTkSuQmCC');
      background-size: 100%;
      background-repeat: no-repeat;
      position: absolute;
      left: 0;
      top:0;    
      width: 16px;
      height: 16px;
}

使用“缩放”减少总宽度/高度,并获得所需的内容

.box:之前{
内容:网址数据:数据:图像/png;Bas64,数据:数据:数据:数据:图像/png;Bas64,数据数据:图像/png;Bas64,数据:数据:图像/png;基础64,数据,数据,数据:数据:图像/png;基础64,数据,数据,数据,数据,数据,数据,数据,数据,数据,数据,数据收集,4个国家,4个6个数据,6个,6个数据,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,6个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个,8个L2.一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的非非非非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的ZEVKSAPFIJCAMSKRUFMIRGHDB+IZHX5PtfFBf8M0R3DX43YH79W6TLRAAAAELFTKSUQMCC');
位置:绝对位置;
变换:比例(0.7);
宽度:1米;
高度:1米;
}

事实证明,不可能在psuedo元素的
内容
属性中包含图像,因为psuedo元素是

来自MDN:
在CSS中,a是一个元素,其表示超出了CSS的范围;它们是外部对象,其表示独立于CSS格式模型。
简单地说,它们是内容不受当前文档样式影响的元素。被替换元素的位置可以使用CSS来影响,但不会影响被替换元素本身的内容


因此,正如其他答案所建议的,使用
背景
CSS属性将解决问题。

您是否尝试过简单地不使用position:absolute?或者为伪元素添加一些更高的
宽度、高度值?PS:您的问题一点也不清楚。…@RokoC.Buljan,如上图所示,psuedo元素的
content
中的图像超出了16 x 16 px。现在清楚了吗?@RokoC.Buljan是的,我添加了宽度和高度属性,您可以检查屏幕快照下方的CSS片段不使用内容,使用背景image@TemaniAfif好的。但是我想通过使用
内容
(如问题中所述)感谢您的回答,但我希望伪元素中的图像为
16px x 16px
,因此问题-不希望这样overflow@EdwardTorvalds将
16px
设置为背景图像大小。(请参阅第一个示例,其中没有无用的伪元素)请签出我的答案:谢谢你的答案,但它会剪切图像请签出我的答案:谢谢你的答案,但这段代码并不能解决溢出的问题image@EdwardTorvalds唯一的方法是使用背景图像(请参阅更新)或者使用一些技巧来避免像缩放这样的溢出。你把它缩小,这样它就可以覆盖最初的空间。请检查我的回答:@EdwardTorvalds因为这个特殊的原因,我告诉过你你不能,你需要背景或其他技巧,比如缩放。