How can I prevent content of before psuedo element from overflowing its width and height?

791 views css
4

How can I prevent content of before psuedo element from overflowing its width and height? enter image description here

CSS styles for this ::before psuedo element is:

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;

(the div to which this psuedo element belongs has position: relative;

Edit:

P.S.: I don't want to change the content of the psuedo element. Is it still possible?

answered question

Have you tried by simply not using position: absolute? And perhaps adding some higher values for width, height to your pseudo element? PS: your question is not clear at all...

@RokoC.Buljan as you can see in the image above, the image in content of psuedo element is going beyond 16 x 16 px. Is it clear now?

@RokoC.Buljan Yes, I have added the width and height properties, you can check the CSS snippet below the screen shot

don't use content, use background image

@TemaniAfif ok. But I want to achieve the solutions WITH using content (as specified in the question) thanks

add overlfow:hidden then

@TemaniAfif if will cut the image, wouldn't look good

2 Answers

7

enter image description here

By removing the height and width properties, we get the above image.

posted this
10

blockquote {
  margin:0;
  max-width: 130px; /* demo only */
}

blockquote: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');
  transform: translate(-120%, -10%);
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
}
<blockquote>Charlie, from the lorem ipsum book has a nice dog called</blockquote>

posted this

Have an answer?

JD

Please login first before posting an answer.