Is the height of a picture that is inserted by ::before or ::after controllable?

Question

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?

Answer 1

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>

Answer 2

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;
}