[分享]css两行文字后接一个大字

在网页设计中，我们常常需要将一段文本的前两行显示为正常大小字体，而后面接着一个加大的字体标题。这种布局其实很简单，只需要结合CSS的伪类选择器和字体控制属性便可实现。p { fontsize: 16p...

在网页设计中，我们常常需要将一段文本的前两行显示为正常大小字体，而后面接着一个加大的字体标题。这种布局其实很简单，只需要结合CSS的伪类选择器和字体控制属性便可实现。

p {
  font-size: 16px; /* 普通字体大小 */
  line-height: 1.5; /* 行高 */
  position: relative; /* 相对定位 */
}

p::after {
  content: ""; /* 伪元素 */
  display: block; /* 块级元素 */
  font-size: 30px; /* 大字体大小 */
  position: absolute; /* 绝对定位 */
  left: 0; top: 0; /* 定位到左上角 */
  transform: translate(0, 50%); /* 向下偏移一半 */
} 

以上代码的思路是将p标签设置为相对定位，然后使用伪元素“::after”生成一个空的块级元素，大小为30px，并设置为绝对定位，同时向下偏移一半。由于没有设置内容，所以伪元素不会显示任何东西。接下来，在CSS中我们只需要使用“content”属性来给伪元素设置内容，这样就可以将大字标题插入到文本的第三行之后了。