返回

2023 最强 CSS 魔法：伪元素 content + CSS 函数，让你嗨翻天！

前端

伪元素 content 中 CSS 函数的奇妙应用

什么是伪元素 content？

伪元素 content 可以为元素添加额外内容，可以是文本、图像、视频甚至 HTML 代码，为网页设计带来了无限的可能性。

什么是 CSS 函数？

CSS 函数是一组内置函数，用于对值进行操作，如计算、生成颜色和加载图像。通过在伪元素 content 中使用 CSS 函数，我们可以创造出令人惊艳的视觉效果。

超实用的场景

1. 实现文本渐变

::before {
  content: "Hello World";
  background: linear-gradient(to right, #ff0000, #00ff00, #0000ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

这个代码可以为文本添加一个漂亮的彩虹渐变效果。

2. 创建圆形头像

::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ccc;
}

此代码创建一个圆形头像占位符，无需任何图像文件。

3. 显示元素尺寸

::before {
  content: "Width: " attr(width) ", Height: " attr(height);
}

该代码可以动态显示元素的宽度和高度，非常方便。

4. 生成二维码

::before {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfjAh4OIhwAAAAkAAABfiG8OoJ50QAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEMSURBVDhPndAxAQAAAMK8hx409/xQJQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB0ElFSZgAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDRGEpjY6hEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgGEsRpmJhoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgPBYRpmJFpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDgGBcRpmLZoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgFBsRpmR5oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQDKGFpjY6lsAAAAAAAAAAAAAAAA