在单词中间创建 'cursor'

Question

我正在尝试在 HTML/CSS/JS 中制作一些看起来像光标已放置并冻结在单词中间的东西。现在我有这样的东西：

"Oran|ge"

但很明显，当你把光标放在单词的中间时，这并不是它真正的样子 "Orange." 我希望它看起来完全一样，但在 [=21= 之间有一条小垂直线] 和 'g'

感谢任何帮助。

Answer 1

这会是一个选项吗，其中使用了伪，连同负边距。

span::after {
  content: '∣';
  font-size: 125%;
  margin: 0 -2px;
}

"Ora<span>n</span>ge"

此处使用边框

span::after {
  content: '';
  border-left: 1px solid;
}

"Ora<span>n</span>ge"

Answer 2

尝试：

.box-cont{position: relative;margin: 0px 2px;}
.cursor{position:absolute;width: 1px; height: 20px; background: black;}

"Oran<span class="box-cont"><span class="cursor"></span></span>ge"

"Oran<span class="box-cont"><span class="cursor"></span></span>ge"

Answer 3

这个怎么样，我添加了一个闪烁动画以确保真实性 - 时间有点偏差，但已经足够接近了。另请注意，我在示例中设置了 contenteditable，因此您可以并排比较真实的插入点光标。

.insertion-point {
    width: 0;
    display: inline;
    margin-right: -1px;
    border-right: 1px solid black;
    animation: ip-blink .89s steps(2, start) infinite;
}

@keyframes ip-blink {
    to {
        visibility: hidden;
    }
}

<p contenteditable="true">Oran<span class="insertion-point"></span>ge

值得注意的是，这会根据字体大小准确缩放。

在单词中间创建 'cursor'

Create 'cursor' in the middle of a word

javascript

css

css-float