В этой статье представлен нижний контур для знаков, где при заполнение идет эффект. Контур, это линия, нарисованная вокруг элементов за пределами границы. Пространство между элементом и его контуром является прозрачным. Кроме того, контур может быть не прямоугольным. Для этого нам нужен способ стилизации диапазона на основе состояния фокуса.
HTML
Код
<div>
<span contenteditable>Здесь может быть разный текст...</span>
</div>
CSS
Код
div {
padding: 0.4rem 0;
border-bottom: 4px solid #383838;
width: 90vw;
}
span {
position: relative;
bottom: -11px;
color: #f3ecec;
display: inline-block;
padding: 0.5rem 0;
border-bottom: 4px solid #18de83;
outline: 0;
}
Длина: это расстояние или расстояние между контуром и границей, а точнее, это расстояние на которое контур смещается от края границы. Это также может иметь отрицательное значение. Если длина отрицательна, то контур помещается внутри элемента.
Демонстрация
