CSS 伪类、伪元素的应用实例：电池充电、高能进度条

/* 电池充电时的样式 */
.battery-full::after {
  content: "充电中";
  color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  font-weight: bold;
}
 
/* 高能模式进度条 */
.progress-bar-turbo::before {
  content: "高能模式";
  color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1em;
  font-weight: bold;
  animation: turbo-animation 2s infinite ease-in-out;
}
 
@keyframes turbo-animation {
  0% { color: red; }
  50% { color: yellow; }
  100% { color: green; }
}

这个代码示例展示了如何使用CSS伪元素::before和::after来为电池充电和高能模式进度条添加自定义文本。通过content属性，我们可以在元素内部插入内容。通过position、transform和animation属性，我们可以控制文本的位置和动画效果。