.blinking-cursor {
  position: relative;
}

.blinking-cursor::after {
  content: '|';
  position: absolute;
  right: -0.1em;
  width: 1px;
  color: black;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* 可选：为不同的元素设置不同的光标样式 */
.thin-cursor::after {
  content: '｜'; /* 使用全角竖线字符 */
}

.block-cursor::after {
  content: '▋'; /* 使用块状字符 */
}

/* 可选：改变光标颜色 */
.colored-cursor::after {
  color: #007bff;
}
