【HTNL】CSS的伪类选择器02

最新推荐文章于 2022-11-02 23:34:40 发布

文思月

最新推荐文章于 2022-11-02 23:34:40 发布

阅读量98

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_44366571/article/details/101907551

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS的伪元素

first-letter：

定义： 对某元素中的第一个字进行修饰
语法： 元素：first-letter{}

first-line

定义： 对某元素中的第一行进行修饰
语法： 元素：first-line

before:

定义： 在元素的最前面，位于标签文字之间的那段距离之内
语法： 元素：before，和content属性使用
注意： 设置的content的内容无法被选中

before:

定义： 在元素的最后面，位于标签文字之间的那段距离之内
语法： 元素：after，和content属性使用
注意： 设置的content的内容无法被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type = "text/css">
    p:first-letter{
      color: red;
      font-size: 50px;
    }
    p:first-line{
      background-color: orange;
    }
    p:before{
      content: "我会出现在整个段落的最前面，且无法选中";
    }
    p:after{
      content: "我会出现在整个段落的最后面，且无法选中";
      color: blue;
    }
  </style>
</head>
<body>
<p>
  想看你笑
  想和你闹
  想拥你入我怀抱
  上一秒红着脸在争吵
  下一秒转身就能和好
  不怕你哭
  不怕你叫
  因为你是我的骄傲
  一双眼睛追着你乱跑
  一颗心早已经准备好
  一次就好我带你去看天荒地老
  在阳光灿烂的日子里开怀大笑
  在自由自在的空气里吵吵闹闹
  你可知道我唯一的想要
  世界还小我陪你去到天涯海角
  在没有烦恼的角落里停止寻找
  在无忧无虑的时光里慢慢变老
  你可知道我全部的心跳
  随你跳
  想看你笑
  想和你闹
  想拥你入我怀抱
  上一秒红着脸在争吵
  下一秒转身就能和好
  不怕你哭
  不怕你叫
  因为你是我的骄傲
  一双眼睛追着你乱跑
  一颗心早已经准备好
  一次就好我带你去看天荒地老
  在阳光灿烂的日子里开怀大笑
  在自由自在的空气里吵吵闹闹
  你可知道我唯一的想要
  世界还小我陪你去到天涯海角
  在没有烦恼的角落里停止寻找
  在无忧无虑的时光里慢慢变老
  你可知道我全部的心跳
  随你跳


</p>
</body>
</html>

文思月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTNL】CSS的伪类选择器02

CSS的伪元素first-letter：定义：对某元素中的第一个字进行修饰语法：元素：first-letter{}first-line定义：对某元素中的第一行进行修饰语法：元素：first-linebefore:定义：在元素的最前面，位于标签文字之间的那段距离之内语法：元素：before，和content属性使用注意：设置的content的内容无法被选中befo...
复制链接

扫一扫