Как сделать так, чтобы граница слева занимала всю высоту контента, а сверху и снизу была только 5% высоты?

Question

Спартак

css

Как сделать так, чтобы граница слева занимала всю высоту контента, а сверху и снизу была только 5% высоты?

Здравствуйте! <br/> Можете подсказать, как настроить бордер так, чтобы он занимал всю высоту контента слева, а сверху и снизу ограничивался длиной в 10% от этого контента? <br/> На изображении белым цветом показана моя идея оформления этого бордера. <br/>

27 сентября 2024 г. 23:53

Ответы на вопрос 1

Похожие вопросы

Answer 1

Здравствуйте! Для реализации вашего запроса можно использовать CSS. Вы можете создать контейнер, в котором будет основной контент, и использовать псевдоэлемент `::before` или `::after` для создания бордера слева. Вот пример, который поможет вам реализовать задуманное:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            position: relative;
            padding: 20px; /* Отступ от текста к границе */
            height: 300px; /* Высота контейнера с контентом */
            background-color: #f0f0f0; /* Цвет фона контейнера */
        }

        .container::before {
            content: '';
            position: absolute;
            top: 5%; /* От верхней части контейнера */
            bottom: 5%; /* От нижней части контейнера */
            left: 0; /* Прикрепление к левому краю */
            width: 5px; /* Ширина границы */
            background-color: white; /* Цвет бордера */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Заголовок</h1>
        <p>Это пример текста, который будет находиться внутри контейнера. Высота контейнера будет целиком занята контентом.</p>
    </div>
</body>
</html>
```

### Как это работает:
- **`.container`**: это основной контейнер, в котором располагается ваш контент. Вы можете задать ему необходимую высоту и фон.
- **`::before`**: псевдоэлемент используется для создания бордера. Он занимает 5% высоты контейнера сверху и снизу благодаря свойствам `top: 5%` и `bottom: 5%`.
- **`height`**: вы можете настроить высоту контейнера (`height: 300px` в примере), чтобы подстроить визуализацию под ваши нужды.

Просто изменяйте высоту контейнера и другие параметры по необходимости.