CSS — как сделать линию короче бокса
При верстке макета сайта, кстати, совсем несложного, возник вопрос.
Заключается он в том, имеется информационная часть, разбитая на две колонки. Каждая из колонок также разделена на отдельные секции — посты. Для колонок и постов на макете задуманы дизайнером декоративные линии-разделители.
Проблемы с созданием таких линий, в принципе, нет никакой. Их можно легко создать с помощью стилевого правила
border-bottom
border-right
. Или же с помощью правил
border-right
и элемента
Но вопрос заключается в том, что декоративные линии на макете короче, чем высота колонки или ширина поста. То есть, получается, что
border
должен быть короче, чем бокс:
Как же поступить в данном случае? Скажем так, обычными способами CSS решить такой вопрос невозможно. Но решение было найдено с помощью форума htmlbook.
В данном случае можно выйти из положения с помощью псевдокласса
:after
. Для наглядности представим такой пример.
Создаем слой с контентом:
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text textИ пропишем для него стилевые правила:
Как видим, их не так уж и много. Задаем ширину блока и устанавливаем для него относительное позициоирование. Затем для созданного нами бокса создаем псевдокласс
:after
и прописываем для него свойства:
div:after content: ""; position: absolute; top: 30px; right: -10px; bottom: 30px; border-left: 1px solid #000; >Немного распишем, что да как в этом коде.
Внутри простого блока после его содержимого создается псевдоблок с абсолютным позиционированием, для которого устанавливаются координаты
bottom
(благодаря двум последним он растягивается, так как создаются верхняя и нижняя координата для границы) и для этого блока создается только левая граница
border-left
со свойствами:
1px сплошного черного цвета
Изменить длину border-bottom
Нужно сделать нижнюю границу border-bottom не на всё длину текста, а только процентов на 40 и по центру, как на скриншоте, подскажите пожалуйста.
Лучшие ответы ( 1 )
| Здесь вы можете заказать любую студенческую или школьную работу. |
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как поставить иконку кругом в центре border-bottom без фона border-bottom внутри круга?
Как поставить иконку кругом в центре border-bottom без фона border-bottom внутри круга?Чет.
Border-top и border-bottom сделать шарами
здравствуйте, не могу сделать границы рамки шарами, т.е. border-bottom: 15px dotted black; — будут.
Двойной border-bottom
Создаю, 2 тему, извиняюсь, как сделать чтобы border был, на блоке div, и под текстом, к примеру.
border-bottom не работает
Здравствуйте! У меня почему-то не хочет отображать border-bottom, я его к чему хочешь применял.
Как контролировать длину border-bottom при наличии ::before и padding-left?
Здравствуйте.
Помогите,пожалуйста,решить данный вопрос, уже пересмотрел кучу ответов на stackoverflow, но так и не нашёл.
Задача:
Сделать тег «p» с «border-bottom» и псевдоэлементом «::before». Добавляя «padding-left» к «p», увеличивается и «border-bottom», даже при наличии «display inline-block» у «p».
Вопрос:
Как сделать так,чтобы «border-bottom» не увеличивался при наличии «padding-left», а оставался строго в границах «p»? Интересует именно «border-bottom», а не «box-shadow» или «text-decoration:underline».
- Вопрос задан более трёх лет назад
- 1378 просмотров
Комментировать
Решения вопроса 2
Алексей Уколов @alexey-m-ukolov Куратор тега CSS
Как сделать так,чтобы «border-bottom» не увеличивался при наличии «padding-left», а оставался строго в границах «p»?
Именно в такой постановке — никак. Но если заменить padding на margin , всё будет работать.
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Technical Team Lead
p < display: inline-block; border-bottom: 1px solid #000; position: relative; margin-left: 30px >p::before
Вариант №2 без абсолютного позиционирования:
p < display: inline-block; border-bottom: 1px solid #000; margin-left: 30px; >p::before
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- CSS
Почему пропадает before?
- 1 подписчик
- час назад
- 25 просмотров
- CSS
Как сделать вот такой дизайн фона на веб странице?
- 1 подписчик
- 3 часа назад
- 48 просмотров
Длина рамки CSS
Как сделать рамку длиннее или наоборот?
Отслеживать
51.3k 87 87 золотых знаков 267 267 серебряных знаков 505 505 бронзовых знаков
задан 21 мар 2012 в 14:34
190 2 2 золотых знака 5 5 серебряных знаков 15 15 бронзовых знаков
Рамка не может быть длиннее или короче. Вообще нельзя влиять на рамку ее свойствами. Она зависит от размеров элемента, вокруг которого она строится. И, как вам уже подсказали, это можно сделать изменением размеров элемента или его внутренними отступами