在HTML / Javascript / CSS中绘制虚拟（假）carret

Question

我想在div（不是文本区域，也不是可编辑的内容）中绘制插入符号。我确切知道插入符号必须绘制的位置（两个字符之间）。我通过插入此字符|，但是当然，它会移动字符，如下所示：

my text ...
my |text ...

当然，我的字符插入符号不会闪烁。

我仔细阅读了以下问题，但更多地是关于用于模拟替代或倍数插入符号的通用库。

How to simulate an artificial caret in a textarea?

我关心的更多是在不更改内容的情况下显示闪烁的插入符号。我认为使用一些CSS技巧是可行的，但我不知道从哪里开始。

Answer 1

此codepen看起来完全符合您的需求：

https://codepen.io/ArtemGordinsky/pen/GnLBq

.blinking-cursor {
  font-weight: 100;
  font-size: 30px;
  color: #2E3D48;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes "blink" {
  from,
  to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-moz-keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-webkit-keyframes "blink" {
  from,
  to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-ms-keyframes "blink" {
  from,
  to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-o-keyframes "blink" {
  from,
  to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

<span class="blinking-cursor">|</span>

Answer 2

也许此网站会有所帮助？https://css-tricks.com/almanac/properties/c/caret-color/看看标有“ Faking It”的部分]