Как создать: текстовую разделительную линию
- Предыдущая страница Разделительная линия
- Следующая страница Анимационная иконка
Учимся, как использовать CSS для создания текстовой разделительной линии.
Как создать адаптивную текстовую разделительную линию
Шаг 1 - Добавьте HTML:
<div class="divider">Lorem Ipsum</div>
Шаг 2 - Добавьте CSS:
.divider {
font-size: 30px;
display: flex;
align-items: center;
}
.divider::before, .divider::after {
flex: 1;
content: '';
padding: 3px;
background-color: red;
margin: 5px;
}
Объяснение примера:
Этот пример teaches you how to use CSS to create a text separator. В частности, он использует комбинацию HTML и CSS для достижения этого эффекта.
Сначала вам нужно добавить в HTML элемент div с классом "divider" и поместить в него текст, который вы хотите показать (в этом примере, текст "Lorem Ipsum").
затем, в CSS, вы установили .divider класс установил了一些 стили. Вы установили размер шрифта 30 пикселей, использовали flex-раскладку и установили align-items: center; чтобы сделать текст вертикально центрированным в разделительной линии.
затем вы использовали псевдоэлемент ::before и ::after чтобы добавить декорацию с обеих сторон разделительной линии. Оба этих псевдоэлемента установлены flex: 1 чтобы они занимали .divider Все пространство внутри элемента, кроме текста. Вы также установили content: '' Убедитесь, что эти два псевдоэлемента пусты и не содержат никакого контента.
Затем, установите внутренний отступ, цвет фона и внешние поля, чтобы определить стиль разделительной линии. В этом примере, цвет разделительной линии красный, и есть некоторые внутренние и внешние поля.
- Предыдущая страница Разделительная линия
- Следующая страница Анимационная иконка
