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

Question

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

my text ...
my |text ...

当然，我的角色插入符不会眨眼。

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

如何在文本区域中模拟人工插入符号？

我更关心的是在不更改内容的情况下显示闪烁的插入符号。我觉得通过一些 css 技巧是可行的，但我不知道从哪里开始。

Answer 1

这个代码笔看起来正是您所需要的：

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

.blinking-cursor {

  margin-right:-.1em;
  margin-left:-.1em;
  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;
  }
}

  The word is no lon<span class="blinking-cursor">|</span>ger split!