CSS 伪元素 before 和 after

2025年03月17日 | 阅读 9 分钟

为什么要使用动画？

我们可以为网页添加一些动画，因为它会在用户和网页之间产生微交互。它还会吸引用户的注意力。但如果我们设计了一个定义明确的动画，那么它也会吸引用户关注网页内容。

什么是 CSS 伪元素？

借助伪元素，我们可以为网页添加一些装饰性内容。CSS 中有许多伪元素。它们是：::before、::after、::placeholder、::first-letter 等。但在本文中，我们只学习 ::before 和 ::after。

::Before 伪元素

借助此伪元素，我们可以在元素之前插入一些内容。它也是所选元素的第一个子元素。

语法

selector::before {
  content: "Some content or value";
  /* Other CSS properties for styling */
}

示例

<!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>
  body {
 font-family: Arial, sans-serif;
 background-color: #f0f0f0;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

.fancy-heading {
 position: relative;
 font-size: 36px;
 color: #333;
}

.fancy-heading::before {
 content: "";
 position: absolute;
 top: 50%;
 left: -20px;
 transform: translateY(-50%);
 width: 10px;
 height: 60%;
 background: linear-gradient(to bottom, #ff9a8b, #ffc19e);
 border-radius: 20px;
}

 </style>
</head>
<body>
 <h1 class="fancy-heading">Welcome to javaTpoint</h1>
</body>
</html>

输出

说明

在上面的代码中，我们使用 before 伪元素在标题的左侧创建了一个垂直条。这里，我们将 position 属性值用作 absolute 值。

::After 伪元素

借助此伪元素，我们可以在元素之后插入一些内容。它也是所选元素的第一个子元素。

语法

selector::after {
  content: ""; /* This is required, even if it's an empty string */
  /* Other CSS properties to style the ::after element */
}

示例

<!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>
  body {
 font-family: Arial, sans-serif;
 background-color: #f0f0f0;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

.decorated-paragraph {
 position: relative;
 font-size: 18px;
 color: #333;
 margin: 20px;
}

.decorated-paragraph::after {
 content: "";
 display: block;
 width: 40px;
 height: 3px;
 background-color: #3498db;
 margin-top: 10px;
}

 </style>
</head>
<body>
 <p class="decorated-paragraph">This is a paragraph with a decorative element.</p>
</body>
</html>

输出

说明

在上面的代码中，我们使用伪元素在段落后创建了一个水平条。这里，我们将 display 属性用作 block。

伪元素和伪类有什么区别？

有时，伪元素和伪类会引起混淆。因为它们的名称看起来相似，但实际上它们是不同的。

伪元素是一种关键字，它通过与选择器合并来为特定元素提供样式属性。例如，如果我们使用 ::first-letter，则它用于为段落或单词的第一个字母提供样式属性。伪元素必须以双冒号开头。让我们通过一个例子来理解这一点。

示例 1

<!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>
  body {
 font-family: Arial, sans-serif;
 background-color: #f0f0f0;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

.drop-cap {
 font-size: 20px;
 line-height: 1.5;
 color: #333;
}

.drop-cap::first-letter {
 font-size: 60px;
 color: #e74c3c;
 float: left;
 margin: 0 10px 0 0;
}

 </style>
</head>
<body>
 <p class="drop-cap">Once upon a time, there was a beautiful kingdom...</p>
</body>
</html>

输出

说明

在上面的代码中，我们使用了伪元素 first-letter，用于为段落的第一个字母提供一些样式属性。

对于伪类，它是一种关键字，用于与选择器合并并用于定位元素的状态。所有伪类都必须以单冒号开头。

示例 2

<!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>
  body {
 font-family: Arial, sans-serif;
 background-color: #f0f0f0;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

.image-container {
 position: relative;
 overflow: hidden;
 width: 300px;
 height: 200px;
}

.image-container img {
 width: 100%;
 height: 100%;
 transition: transform 0.3s ease;
}

.image-container:hover img {
 transform: scale(1.1);
}

 </style>
</head>
<body>
 <div class="image-container">
  <img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?cs=srgb&dl=pexels-anjana-c-674010.jpg&fm=jpg" alt="Image">
 </div>
</body>
</html>

输出

说明

在此示例中，hover 伪类用于在鼠标悬停在图像上时为图像应用平滑的缩放过渡效果。图像从其原始大小开始，在悬停时放大 10%。这创造了一种优雅而微妙的动画，为设计增添了一丝交互性。

CSS 中有许多伪类，用于定位所有元素。它们如下。

输入元素状态：:checked
语言状态：lang()
链接相关状态：:visited
媒体资源状态：:playing
时间维度状态：:current
DOM 位置状态：:first-child
用户操作状态：:hover

使用伪元素进行动画

我们可以借助伪元素创建动态网页。要创建动态 CSS，我们需要借助以下内容。

转换（Transform）

借助此属性，我们可以缩放、倾斜、旋转和移动元素。我们可以借助 transform 函数，即 rotate() 和 scale() 来实现这一点。

过渡

借助此属性，我们可以通过元素从一个状态到另一个状态的过渡来定义动画。

位置

借助此属性，我们可以定义元素在文档中的位置。我们可以将伪元素的位置设置为 relative，这是非常常见的。

Z-index

借助此属性，我们可以设置定位元素的 Z 顺序。根据 z-index 的值，所有元素都会相互重叠。 z-index 值较大的元素将覆盖 z-index 值较低的元素。

一览 CSS Transform 和 Transition

我们主要使用 CSS transform 属性，该属性用于将网页元素进行翻译（移动）、旋转、缩放和倾斜。让我们通过一个例子来理解这一点。

示例

<!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>
  body {
 font-family: Arial, sans-serif;
 background-color: #f0f0f0;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

.card {
 perspective: 1000px;
 width: 200px;
 height: 300px;
}

.card-inner {
 width: 100%;
 height: 100%;
 transition: transform 0.5s;
 transform-style: preserve-3d;
}

.card:hover .card-inner {
 transform: rotateY(180deg);
}

.card-front,
.card-back {
 position: absolute;
 width: 100%;
 height: 100%;
 backface-visibility: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
 border: 1px solid #ccc;
 background-color: #fff;
}

.card-back {
 transform: rotateY(180deg);
}

 </style>
</head>
<body>
 <div class="card">
  <div class="card-inner">
   <div class="card-front">
    <h2>Front</h2>
   </div>
   <div class="card-back">
    <h2>Back</h2>
   </div>
  </div>
 </div>
</body>
</html>

输出

如果我们将鼠标悬停在元素上，则会显示下面的输出。

使用 Relative 和 Absolute 属性进行定位

有许多 CSS 属性用于控制元素的流程和位置。让我们讨论 relative 和 absolute 定位属性。

相对定位

借助 relative 定位属性，我们可以控制元素相对于文档正常流程的位置。让我们通过一个例子来理解这一点。

示例

<!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>
  body {
 font-family: Arial, sans-serif;
 background-color: #f0f0f0;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

.container {
 width: 300px;
 height: 300px;
 border: 1px solid #ccc;
 position: relative;
}

.box {
 width: 100px;
 height: 100px;
 background-color: #3498db;
 position: relative;
 top: 30px;
 left: 50px;
}

 </style>
</head>
<body>
 <div class="container">
  <div class="box"></div>
 </div>
</body>
</html>

输出

说明

在上面的代码中，我们实现了 position: relative; 属性，用于将 .box 元素相对于其在 .container 元素内的正常位置进行定位。.box 元素向下（top: 30px;）移动 30 像素，并向右（left: 50px;）移动 50 像素。

绝对定位

借助 absolute 定位属性，目标元素会从正常的文档流中脱离，并且页面布局中不会创建空间。并且所有元素的位置相对于最近的已定位祖先元素。让我们通过一个例子来理解这一点。

示例

<!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>
  body {
 font-family: Arial, sans-serif;
 background-color: #f0f0f0;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

.image-container {
 position: relative;
 width: 300px;
 height: 200px;
 overflow: hidden;
}

.image-container img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.overlay-text {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: #fff;
 font-size: 24px;
 background-color: rgba(0, 0, 0, 0.7);
 padding: 10px 20px;
 border-radius: 5px;
}

 </style>
</head>
<body>
 <div class="image-container">
  <img src="https://cdn.wallpapersafari.com/16/69/rcj6Cz.jpg" alt="Beautiful Image">
  <h2 class="overlay-text">Example for absolute position</h2>
 </div>
</body>
</html>

输出

说明

在上面的代码中，我们将 position 属性用作 absolute。position: absolute; 属性用于将 .overlay-text 元素绝对定位在 .image-container 之上。通过使用 top、left 和 transform 属性，文本在水平和垂直方向上都居中。应用了半透明的背景色、内边距和圆角，以创建优雅的叠加效果，与图像形成鲜明对比。

使用 Z-Index 控制元素的堆叠顺序

我们可以创建一个网页，其中所有元素都堆叠在一起。堆叠顺序最高的元素将始终显示在堆叠的顶部。让我们通过一个例子来理解这一点。

示例

<!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>
  body {
 font-family: Arial, sans-serif;
 background-color: #f0f0f0;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

.container {
 position: relative;
 width: 300px;
 height: 300px;
}

.box {
 width: 100px;
 height: 100px;
 color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
 position: absolute;
 border-radius: 5px;
}

.box1 {
 background-color: #3498db;
 z-index: 3;
}

.box2 {
 background-color: #e74c3c;
 z-index: 2;
}

.box3 {
 background-color: #27ae60;
 z-index: 1;
}

 </style>
</head>
<body>
 <div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
 </div>
</body>
</html>

输出

说明

在上面的代码中，我们使用了 Z-index 属性，它控制三个框的堆叠顺序。z-index 值越高，元素越靠近查看者，从而产生深度感。position: absolute; 属性用于在容器内定位框。这种布局导致视觉分层效果，尽管 HTML 中元素的顺序不同，但蓝色框在最上面，其次是红色框，然后是绿色框。

使用 CSS 伪元素创建动画按钮

让我们使用 CSS 伪元素创建一个动画按钮。

示例

<!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>
  body {
 font-family: Arial, sans-serif;
 background-color: #f0f0f0;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

.animated-button {
 position: relative;
 background-color: #3498db;
 border: none;
 color: #fff;
 padding: 10px 20px;
 font-size: 16px;
 cursor: pointer;
 overflow: hidden;
}

.animated-button::before,
.animated-button::after {
 content: "";
 position: absolute;
 width: 0;
 height: 100%;
 background-color: rgba(255, 255, 255, 0.2);
 transition: width 0.3s;
 z-index: -1;
}

.animated-button::before {
 left: 0;
 top: 0;
}

.animated-button::after {
 right: 0;
 top: 0;
}

.animated-button:hover::before,
.animated-button:hover::after {
 width: 100%;
}

 </style>
</head>
<body>
 <button class="animated-button">Click Me</button>
</body>
</html>

输出

说明

在上面的代码中，我们创建了 ::before 和 ::after 伪元素，用于创建水平线，当鼠标悬停在按钮上时，这些线会产生动画。这些线从按钮的左侧和右侧开始，并平滑地延伸到中心。z-index: -1; 属性确保线条位于按钮内容之后。

当您将鼠标悬停在按钮上时，线条会动画化以填充按钮的宽度，从而创建一种流畅而微妙的动画，为按钮的外观增添优雅的触感。

下一主题CSS Inline Block

CSS 伪元素 before 和 after

为什么要使用动画？

什么是 CSS 伪元素？

::Before 伪元素

::After 伪元素

伪元素和伪类有什么区别？

示例 1

示例 2

使用伪元素进行动画

一览 CSS Transform 和 Transition

示例

使用 Relative 和 Absolute 属性进行定位

使用 Z-Index 控制元素的堆叠顺序

示例

使用 CSS 伪元素创建动画按钮

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 伪元素 before 和 after

为什么要使用动画？

什么是 CSS 伪元素？

::Before 伪元素

::After 伪元素

伪元素和伪类有什么区别？

示例 1

示例 2

使用伪元素进行动画

一览 CSS Transform 和 Transition

示例

使用 Relative 和 Absolute 属性进行定位

使用 Z-Index 控制元素的堆叠顺序

示例

使用 CSS 伪元素创建动画按钮

示例

相关帖子

CSS Hover

CSS text-transform

CSS Last-Child

CSS 中的 SASS

CSS border-radius

CSS clip-path

page-break-after 属性

CSS Counter

CSS clearfix

Rounded Border CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器