Создать «курсор» в середине слова

Question

Создать «курсор» в середине слова

1

Я пытаюсь сделать что-то в HTML/CSS/JS, похожее на то, что курсор помещен и заморожен в середине слова. На данный момент у меня есть что-то вроде:

"Оран | GE"

но очевидно, что не то, на что это похоже, когда вы помещаете курсор в середину слова "Оранжевый". Я хочу, чтобы он выглядел точно так же, но с небольшой вертикальной линией между 'n' и 'g'

Любая помощь оценивается.

garson 31 май 2017, в 22:24

Источник

Теги:

javascript

css

css3

css-float

3 ответа

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"

LGSon 31 май 2017, в 19:14

1

Пытаться:

.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"

Isays 31 май 2017, в 19:03

Ещё вопросы

Emissary · Accepted Answer · 2017-05-31T19-49-00.000Z

Как насчет этого, я добавил анимацию мигания для аутентичности - время немного немного, но оно достаточно близко. Также обратите внимание, что я установил 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

Стоит отметить, что эта шкала с размером шрифта точно.