将宽度应用于 :first-line

Question

我想要一个标题，第一行比其余部分短。
这是一些代码：

div {
  width: 20em;
  border: 1px solid #000;
}
h3:first-line {
  background-color: yellow;
  width: 10em;
}

<div><h3>Lorem ipsum dolor sit amet who made up this fake Latin text</h3></div>

第一行高亮显示可以应用背景颜色，但不幸的是不能应用宽度。
如何将宽度应用于 :first-line 伪元素？

Answer 1

您不能指定::first-line伪元素的宽度。有关您可以申请的属性列表::first-line，请参阅MDN ::first-line。

解决方法：

您可以使用右浮动伪元素使第一行更短：

div {
  width: 20em;
  border: 1px solid #000;
  line-height: 1.2em;
}
h3:first-line {
  background-color: yellow;
}
h3:before {
  content: '';
  float: right;
  width: 10em;
  height: 1em;
}

<div><h3>Lorem ipsum dolor sit amet who made up this fake Latin text</h3></div>