::before 或::after 插入的图片高度是否可控？

Question

我使用::before 或::after 插入图片。 CSS中的代码是这样的：

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

或

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

当我检查::before 或::after 的宽度时，内容框的宽度与图片的宽度相同。但是，内容框的高度是自动设置的，低于图片的高度。我试着像这样指定高度：

p::before {
    height: 37px;
}

或

p::before {
    height: 71px;
}

它不起作用。也不会溢出。在这种情况下有没有办法指定高度？

Answer 1

关键是：display: block / inline-block / etc.

使用背景图片

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

https://jsfiddle.net/3nmroeLu/

或者内容中有图片:

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

Answer 2

从the specification您可以阅读：

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.

因此图像将位于伪元素内，应用 width/height 将简单地控制伪元素而不是图像。

这里举例说明：

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>

注意文本是如何根据图像的基线对齐方式对齐的。这与执行以下操作完全相同：

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>

所以技术上我们无法控制图像的 height/width 因为我们无法 select 它（也许将来我们会）

唯一的解决办法是将其视为背景，使其成为伪元素的一部分：

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>

::before 或::after 插入的图片高度是否可控？

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

css

pseudo-element

css-content