Я пытаюсь сделать что-то в HTML/CSS/JS, похожее на то, что курсор помещен и заморожен в середине слова. На данный момент у меня есть что-то вроде:
"Оран | GE"
но очевидно, что не то, на что это похоже, когда вы помещаете курсор в середину слова "Оранжевый". Я хочу, чтобы он выглядел точно так же, но с небольшой вертикальной линией между 'n' и 'g'
Любая помощь оценивается.
Как насчет этого, я добавил анимацию мигания для аутентичности - время немного немного, но оно достаточно близко. Также обратите внимание, что я установил 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
Стоит отметить, что эта шкала с размером шрифта точно.
Будет ли это вариант, где используется псевдо, вместе с отрицательным отрывом.
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"
Пытаться:
.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"