search

fezaoduke / fe-practice-hard

晚练课
69 stars 6 forks source link

第 98 期(W3C 标准-CSS-布局排版)：首行文字自定义 #101

Open wingmeng opened 5 years ago

wingmeng commented 5 years ago

上一期提到了 ::first-letter 这个伪元素，这一期介绍 ::first-line。

::first-line 意为“首行文本”，利用它可以向文本的首行添加特殊样式，它会作用于设置元素中的第一行文本的样式，而不论该行出现多少单词。

<textarea>当前段落的首行文字为红色、加粗、微软雅黑字体。使用了 <code>::first-line</code> 伪元素。调整容器宽度，无论段落变成多少行，第一行文字始终是红色。
</textarea>
textarea {
  color: #666;
  resize: both;
}

textarea::first-line {color: red;}