Question

我正在尝试在HTML / CSS / JS中创建一些看起来像光标已被放置并冻结在单词中间的东西。现在我有类似的东西：

“奥兰| GE”

但显然当你把光标放在“橙色”这个词的中间时，它并不是它的真实样子。我希望它看起来完全一样，但在'n'和'g'之间有一条小垂直线

任何帮助表示感谢。

Answer 1

这个怎么样，我为真实性添加了一个眨眼动画 - 时间有点偏，但它足够接近。另请注意，我在示例中设置了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

值得注意的是，它可以准确地缩放字体大小。

Answer 2

这是一个选项，使用伪和负边距。

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 3

尝试：

＆＃13;

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

＆＃13;

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

＆＃13;

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

在单词的中间创建“光标”

3 个答案: