css伪元素(::first-line,::first-letter)

最新推荐文章于 2024-07-30 10:27:19 发布

走，带你去玩

最新推荐文章于 2024-07-30 10:27:19 发布

阅读量135

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_47517731/article/details/126778026

版权

效果图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box{
    background-color: red;
    color: #fff;
    width: 500px;
  }
  /* 针对文字首行进行特殊标注的伪元素 */
  .box::first-line{
    font-size: 30px;
    color: orange;
  }
  /* 针对文本第一个文字进行特殊标注 */
  .box::first-letter{
    font-size: 50px;
    color: blue;
  }

</style>
<body>
  <div class="box">
    记者加入救援队伍，手脚并用向北攀爬。几处滑坡形成的陡峭斜面，从山顶延伸至数百米下的大渡河中，把公路深深埋进了半山腰。记者用了近一个小时，才成功攀过这几处滑坡，回首望去，约莫也才前进几百米距离。随后穿过大岗山隧道，救援队伍来到了大渡河畔临时启用的一个码头上。消防员们登上一艘大船，往“孤岛”深处奔去。“船能到原田湾乡场镇，下船后需再徒步好几个小时才能到草科乡。”刚刚下船的王岗坪乡新桥村村民罗国金告诉记者，在四川乡镇行政区划和村级建制调整改革中，原田湾乡、原挖角乡合并成了如今的王岗坪乡。
  </div>
</body>
</html>