CSS中特殊类型的选择器伪元素如何使用

非非从零学IT

已于 2024-09-05 13:12:59 修改

阅读量776

点赞数 8

CC 4.0 BY-SA版权

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

于 2024-09-05 11:30:24 首次发布

本文链接：https://blog.csdn.net/wangyufei0815/article/details/141925682

一、什么是伪元素

在 CSS 中，伪元素是一种特殊类型的选择器，它允许你为元素的特定部分添加样式，而这些部分在 HTML 文档中并不实际存在。伪元素通常用于创建装饰性效果，如添加边框、背景、阴影等，而不需要额外的 HTML 标记。

伪元素以两个冒号（::）开头，与伪类（一个冒号，:）区分开来。最常见的伪元素包括：

1. ::before：在元素的内容之前插入内容。
2. ::after：在元素的内容之后插入内容。

二、使用 ::before和::after 伪元素

这两个伪元素通常与 content 属性一起使用，content 属性用于定义伪元素显示的内容。

示例：使用 ::before 和 ::after添加装饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pseudo-elements Example</title>
    <style>
        div {
            border: 1px solid #000;
            padding: 20px;
            position: relative;
        }

        div::before {