devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS中的 5 类常见伪元素详解！

作者：不正经 | 2024-05-03 01:33:56

赞

踩

CSS中的 5 类常见伪元素详解！

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

285篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

CSS 伪元素用于创建特定的特殊效果，它们可以用于选择和样式化元素的某些部分，这些部分在文档树中并不存在作为可访问的元素节点。

伪元素主要用于添加装饰性的效果，例如添加前缀内容、创建边框效果等。

而前文的伪类CSS伪类大全！4大类伪类详解用于根据特定条件为已有元素添加样式，它们描述了元素的某个状态，如:hover、:focus、:nth-child()等。

伪元素在 CSS 中使用两个冒号（::）作为前缀，例如：

  1. .my-element::before {
  2.   content: "This is before the element's content";
  3. }
  4.  
  5. .my-element::after {
  6.   content: "This is after the element's content";
  7. }

ok，那我们一起来看看吧。

5 个常见伪元素

一、 ::before

::before 伪元素用于在元素的内容之前插入内容。可以使用的属性取决于所生成的内容，一般来说可以使用的属性与普通元素一样，它的使用。

  1. .my-element::before {
  2.   content: "「This is before the element's content";
  3.   color: red;
  4.   font-weight: bold;
  5. }

但需要注意：

  • 需要指定 content 属性，否则伪元素不会显示。

  • 伪元素默认为内联元素，可以通过设置 display 属性改变其显示方式。

二、 ::after

::after 伪元素用于在元素的内容之后插入内容。注意事项和 ::before 一样。

  1. .my-element::after {
  2.   content: "This is after the element's content」
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/527089
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。