CSS 伪元素

最新推荐文章于 2024-07-11 21:11:19 发布

黑木令

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量5.9k

点赞数

分类专栏：前端 css 文章标签： css css3

本文链接：https://blog.csdn.net/wuzhiyue2/article/details/117986386

版权

前端 css 专栏收录该内容

19 篇文章 6 订阅

订阅专栏

css 伪元素

之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作中开发问题总结相关的内容; 不积跬步，无以至千里, 戒焦戒躁。

好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

详述: 这篇文章是继 css的伪类与 css 伪类选择器后的 CSS伪元素总结，意在总结连贯提炼为一个系统的前端 CSS 知识体系, 有不足之处望大家指出, 如有想要了解的知识点可以留言

::first-lette

 1. 用于向文本的 首字母 设置特殊样式

 2. "first-letter" 伪元素只能用于块级元素 。

 3. 代码示例:

 p:first-letter {
     color: #ff0000;
     font-size:xx-large
 }

2. ::first-line

 1. 用于向文本的 首行 设置特殊样式 。

 2. "first-line" 伪元素只能用于块级元素 。

 3. 代码示例:

   p:first-line {
     color: #ff0000;
     font-variant: small-caps
   }

3. ::before

 1. :before 和 :after 下特有的 content, 用于在 css 渲染中向元素逻辑上的头部或尾部添加内容 。

 2. 这些添加不会出现在 DOM 中, 不会改变文档内容, 不可复制, 仅仅是在 css 渲染层加入 。

 3. 所以不要用: before 或 after 展示有实际意义的内容, 尽量使用它们显示修饰性内容 。

 4. 代码示例:

   h1:before {
     content: url(/i/w3school_logo_white.gif)
   }

4. ::after

 1. 代码示例:

   h1:after {
     content: url(/i/w3school_logo_white.gif)
   }

完整 html 文档

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    p {
      text-align: center;
      background-color: yellowgreen;
      line-height: 166px;
    }

    /* p:first-letter {
      color: #ff0000;
      font-size: 36px;
    *} */

    /* p:first-line {
      color: blueviolet;
      font-variant: small-caps
    } */

    /* p::before {
      content: 'before添加内容';
      color: crimson;
    *} */

    p::after {
      content: 'after 添加内容';
      color: crimson;
    }
  </style>

</head>

<body>
  <div>
    <p> ---- p::after{} 也可设置我们的 icon 图片: content: url(/i/w3school_logo_white.gif) <br> 使用方式与 ::before 相同 </p>
  </div>
</body>
</html>

如果对你有所帮助，大家可以点个关注；整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。

黑木令

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 伪元素

css 伪元素之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作中开发问题总结相关的内容; 不积跬步，无以至千里, 戒焦戒躁。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。详述: 这篇文章是继 css的伪类与 css 伪类选择器后的 CSS伪元素总结，意在总结连贯提炼为一个系统的前端 CSS
复制链接

扫一扫