1

I used ::before or ::after to insert a picture. The code in CSS is like this:

p::before {
    content: url(../image/xs.jpg);
}

or

p::after {
    content: url(../image/submit.png);
}

When I inspect the width of ::before or ::after, the width of the content-box is the same with the width of the picture. However, the height of the content-box is automatically set and is lower than the height of the picture. I tried to specify the height like this:

p::before {
    height: 37px;
}

or

p::before {
    height: 71px;
}

It does not work. Neither does overflow. Is there any way to specify the height in this situation?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
uoay
  • 306
  • 2
  • 13
  • can you please share your code with snippet? – KuldipKoradia Nov 25 '19 at 10:50
  • The duplicate question is incorrect here because it deals with pseudo element having content as String and not image and there is a big difference. With a string as content you can control the width/height of the pseudo element but with image you cannot like I explained (this part isn't in that duplicate) – Temani Afif Nov 26 '19 at 12:18
  • @TemaniAfif Thanks. Yes, you are right. Your answer explains the difference well. And I think I may discover another solution. If set the position of the p relative, and the position of the ::before absolute, then the width and height of ::before will work without specifying display: inline-block for ::before. My understanding is that when ::before is absolutely positioned, it is out of the normal flow so that its width and height can be specified. Is it correct? – uoay Nov 26 '19 at 12:31
  • 1
    @uoay pseudo element are by default inline so you cannot set width/height but if you add position:absolute you change the display implicitely to block so you are allowed to use width/height .. it's not realy position:absolute that allow you this but the fact that position:absolute change the display to block. In all the cases it's the display the key here and many properties change this value implicitely (position:absolute, float, display;flex on container, etc) – Temani Afif Nov 26 '19 at 12:34

2 Answers2

2

From the specification you can read:

Makes the element or pseudo-element a replaced element, filled with the specified <image>. Its normal contents are suppressed and do not generate boxes, as if they were display: none.

So the image will be inside the pseudo element and applying width/height will simply control the pseudo element not the image.

Here is an example to illustrate:

p::before {
  content: url(https://picsum.photos/50/50);
  
  /**/
  border:5px solid red;
  display:inline-block;
  width:150px;
  height:100px;
  background-color:blue;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper scelerisque arcu, non cursus nibh eleifend vitae. Fusce eget justo lorem. Duis eget felis sit amet dolor interdum placerat sagittis auctor tellus. Nunc sodales ut odio at placerat. Integer non interdum dui, id sagittis ante. </p>

Notice how the text is aligned respecting the baseline alignment relatively to the image. It's exacly the same as doing the following:

p span{

  border:5px solid red;
  display:inline-block;
  width:150px;
  height:100px;
  background-color:blue;
}
<p><span><img src="https://picsum.photos/50/50" ></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper scelerisque arcu, non cursus nibh eleifend vitae. Fusce eget justo lorem. Duis eget felis sit amet dolor interdum placerat sagittis auctor tellus. Nunc sodales ut odio at placerat. Integer non interdum dui, id sagittis ante. </p>

So technically we cannot control the height/width of the image since we have no way to select it (maybe in the future we will)

The only solution is to consider it as background so it's a part of the pseudo element:

p::before {
  content:"";
  background: url(https://picsum.photos/50/50) center/cover;
  
  /**/
  border:5px solid red;
  display:inline-block;
  width:150px;
  height:100px;
  background-color:blue;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper scelerisque arcu, non cursus nibh eleifend vitae. Fusce eget justo lorem. Duis eget felis sit amet dolor interdum placerat sagittis auctor tellus. Nunc sodales ut odio at placerat. Integer non interdum dui, id sagittis ante. </p>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
-1

The key is : display: block / inline-block / etc.

Use background-image

.image:before {
  content:"";
  display:block;
  background-image: url(https://via.placeholder.com/150);
  height: 150px;
  width: 150px;
}

https://jsfiddle.net/3nmroeLu/

Or with image in the content :

.image:before {
  content:url(https://via.placeholder.com/150);
  display:block;
  height: 150px;
  width: 150px;
}
mchev
  • 713
  • 1
  • 8
  • 22