css - 将宽度应用于 :first-line

Question

我想要一个第一行比其余部分短的标题。
这是一些code :

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>