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

Question

如何防止void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const { // Grab cell value and cast it to boolean bool boolValue = index.model()->data(index).toBool(); // Paint cell background depending on the bool value if(boolValue) painter->fillRect(option.rect, QColor(179, 229, 255)); else painter->fillRect(option.rect, Qt::red); // Paint text QStyledItemDelegate::paint(painter, option, index); } 伪元素的内容超出其宽度和高度？

此before伪元素的

CSS样式为：

::before

（此伪元素所属的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; 具有div

修改：

P.S .：我不想更改psuedo元素的position: relative;。还有可能吗？

修改：

我希望伪元素为content而又不裁剪图像

Answer 1

删除:before伪文件并使用大小为16px的背景图片

blockquote {
  margin:0;
  max-width: 130px; /* demo only */
  padding-left: 1.5em; /* space for quote icon */
  background: 0 0.1em / 16px no-repeat  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');
}

<blockquote>Charlie, from the lorem ipsum book has a nice dog called</blockquote>

Answer 2

如果在：before元素上使用“ overflow：hidden”，将不会再溢出，并且会切断某些图像。否则，最好将图像用作背景图像，并将背景图像的宽度设置为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;
}

Answer 3

使用比例尺减小整体宽度/高度并获得所需的东西

.box:before {
  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;
  transform: scale(0.7);
  width: 1em;
  height: 1em;
}

<div class="box">
</div>

使用背景将是理想的解决方案：

.box:before {
  content:"";
  background: 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') center/contain no-repeat;
  position: absolute;
  width: 1em;
  height: 1em;
}

<div class="box">
</div>

Answer 4

事实证明，由于psuedo元素为anonymous replaced elements，因此无法将图像包含在psuedo元素的content属性内

来自MDN的

：
在CSS中，replaced element是表示形式超出CSS范围的元素；它们是外部对象，其表示独立于CSS格式模型。
简而言之，它们是其内容不受当前文档样式影响的元素。可以使用CSS影响替换元素的位置，但替换元素本身的内容不受影响。

因此，如其他答案所示，使用background CSS属性将解决问题。