CSS :before 伪元素|极客教程

CSS :before 伪元素

在 CSS 中，:before 伪元素用于在元素内容的前面插入内容。这个伪元素可以用来添加一些额外的装饰或者内容，而不需要修改 HTML 结构。在本文中，我们将详细介绍如何使用 :before 伪元素来实现各种效果。

1. 基本用法

:before 伪元素可以通过 content 属性来定义要插入的内容。下面是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:before 伪元素示例</title>
<style>
  .box::before {
    content: "Hello, ";
  }
</style>
</head>
<body>
<div class="box">world!</div>
</body>
</html>

Output:

CSS :before 伪元素

在这个示例中，我们给一个 div 元素添加了一个 box 类，并使用 ::before 伪元素在其内容前插入了 “Hello, “。运行这段代码，你会看到页面上显示的内容是 “Hello, world!”。

2. 插入图片

除了插入文本内容，:before 伪元素还可以用来插入图片。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:before 伪元素插入图片示例</title>
<style>
  .image::before {
    content: url('https://static.deepinout.com/gk-static/logo.png');
  }
</style>
</head>
<body>
<div class="image"></div>
</body>
</html>

Output:

CSS :before 伪元素

在这个示例中，我们给一个 div 元素添加了一个 image 类，并使用 ::before 伪元素插入了一个图片。运行这段代码，你会看到页面上显示了一个图片。

3. 添加样式

:before 伪元素也可以用来添加样式，比如背景色、边框等。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:before 伪元素添加样式示例</title>
<style>
  .style::before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background-color: #f00;
    border: 2px solid #000;
  }
</style>
</head>
<body>
<div class="style"></div>
</body>
</html>

Output:

CSS :before 伪元素

在这个示例中，我们给一个 div 元素添加了一个 style 类，并使用 ::before 伪元素添加了一个红色背景和黑色边框的方块。运行这段代码，你会看到页面上显示了一个带样式的方块。

4. 使用 content 属性

:before 伪元素的 content 属性可以接受各种值，比如字符串、图片、计数器等。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:before 伪元素使用 content 属性示例</title>
<style>
  .content::before {
    content: "Geek-Docs.com";
    color: #00f;
  }
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>

Output:

CSS :before 伪元素

在这个示例中，我们给一个 div 元素添加了一个 content 类，并使用 ::before 伪元素插入了一个蓝色的 “Geek-Docs.com” 字符串。运行这段代码，你会看到页面上显示了这个字符串。

5. 使用 attr() 函数

:before 伪元素的 content 属性还可以使用 attr() 函数来获取元素的属性值。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:before 伪元素使用 attr() 函数示例</title>
<style>
  .attr::before {
    content: attr(data-text);
    color: #0f0;
  }
</style>
</head>
<body>
<div class="attr" data-text="Geek-Docs.com"></div>
</body>
</html>

Output:

CSS :before 伪元素

在这个示例中，我们给一个 div 元素添加了一个 attr 类，并使用 ::before 伪元素插入了一个绿色的 “Geek-Docs.com” 字符串，这个字符串的内容来自于 data-text 属性。运行这段代码，你会看到页面上显示了这个字符串。

6. 使用计数器

:before 伪元素还可以使用计数器来生成序号。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:before 伪元素使用计数器示例</title>
<style>
  .counter::before {
    content: counter(section) ". ";
    counter-increment: section;
  }
</style>
</head>
<body>
<div class="counter"></div>
<div class="counter"></div>
<div class="counter"></div>
</body>
</html>

Output:

CSS :before 伪元素

在这个示例中，我们给三个 div 元素添加了一个 counter 类，并使用 ::before 伪元素插入了一个序号，每个 div 元素都会增加一个序号。运行这段代码，你会看到页面上显示了三个带序号的内容。

7. 使用 Unicode 字符

:before 伪元素还可以使用 Unicode 字符来插入特殊符号。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:before 伪元素使用 Unicode 字符示例</title>
<style>
  .unicode::before {
    content: "\1F60E";
    font-size: 24px;
  }
</style>
</head>
<body>
<div class="unicode"></div>
</body>
</html>

Output:

CSS :before 伪元素

在这个示例中，我们给一个 div 元素添加了一个 unicode 类，并使用 ::before 伪元素插入了一个 Unicode 符号，这个符号代表着一个笑脸。运行这段代码，你会看到页面上显示了这个笑脸符号。

8. 使用 CSS 变量

:before 伪元素还可以使用 CSS 变量来定义样式。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:before 伪元素使用 CSS 变量示例</title>
<style>
  :root {
    --color: #f0f;
  }
  .variable::before {
    content: "Geek-Docs.com";
    color: var(--color);
  }
</style>
</head>
<body>
<div class="variable"></div>
</body>
</html>

Output:

CSS :before 伪元素

在这个示例中，我们定义了一个 CSS 变量 --color，然后给一个 div 元素添加了一个 variable 类，并使用 ::before 伪元素插入了一个紫色的 “Geek-Docs.com” 字符串，这个颜色来自于 CSS 变量 --color。运行这段代码，你会看到页面上显示了这个紫色的字符串。

9. 使用伪元素实现三角形

:before 伪元素还可以用来实现一些形状，比如三角形。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:before 伪元素使用实现三角形示例</title>
<style>
  .triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid #f00;
    position: relative;
  }
  .triangle::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid #0f0;
  }
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>

Output:

CSS :before 伪元素

在这个示例中，我们使用 :before 伪元素和 border 属性来实现了一个带有两个不同颜色的三角形。运行这段代码，你会看到页面上显示了这个三角形。

10. 使用伪元素实现箭头

除了三角形，:before 伪元素还可以用来实现箭头。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:before 伪元素使用实现箭头示例</title>
<style>
  .arrow {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #00f;
    position: relative;
  }
  .arrow::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #0f0;
  }
</style>
</head>
<body>
<div class="arrow"></div>
</body>
</html>