Как уменьшить длину border в css

CSS — как сделать линию короче бокса

При верстке макета сайта, кстати, совсем несложного, возник вопрос.

Заключается он в том, имеется информационная часть, разбитая на две колонки. Каждая из колонок также разделена на отдельные секции — посты. Для колонок и постов на макете задуманы дизайнером декоративные линии-разделители.

Проблемы с созданием таких линий, в принципе, нет никакой. Их можно легко создать с помощью стилевого правила border-bottom и border-right . Или же с помощью правил border-right и элемента hr .

Но вопрос заключается в том, что декоративные линии на макете короче, чем высота колонки или ширина поста. То есть, получается, что border должен быть короче, чем бокс:

Декоративные линии короче, чем контент

Как же поступить в данном случае? Скажем так, обычными способами CSS решить такой вопрос невозможно. Но решение было найдено с помощью форума htmlbook.

В данном случае можно выйти из положения с помощью псевдокласса :after . Для наглядности представим такой пример.

Создаем слой с контентом:

И пропишем для него стилевые правила:

Как видим, их не так уж и много. Задаем ширину блока и устанавливаем для него относительное позициоирование. Затем для созданного нами бокса создаем псевдокласс :after и прописываем для него свойства:

Немного распишем, что да как в этом коде.

Внутри простого блока после его содержимого создается псевдоблок с абсолютным позиционированием, для которого устанавливаются координаты top и bottom (благодаря двум последним он растягивается, так как создаются верхняя и нижняя координата для границы) и для этого блока создается только левая граница border-left со свойствами: 1px сплошного черного цвета .

TypeScript — размеченные объединения

> Пользовательское объединение типов — что это и как можно использоватьПомимо объединения **примитивных** типов данных (например):<% high. … Continue reading

How to Limit Border Length with CSS

Sometimes, you may have difficulty when you need to make the border shorter than its parent element. To overcome this, use CSS properties and HTML elements. We’ll need to use border properties and some elements such as <span>, <div>, etc., or pseudo-elements.

The solution is quite easy. Just follow the steps below.

Create HTML¶

  • Create two <div> elements.

Add CSS¶

  • Style the <div> with an id "box" by using the height, width, and background properties. Set the position to “relative” and specify the border-bottom property.
  • Style the <div> with an id "borderLeft" by specifying its border-left property. Set the position to “absolute” and add the top and bottom properties.

Let’s see the result of our code.

Example of limiting the left border:¶

Result

Next, we’re going to demonstrate another example, where we limit the border length of four different elements. For that, we use four <div> elements and the :before pseudo-element. To limit the length of the top, bottom, right, and left borders, we use the border-top, border-bottom, border-right, and border-left properties, respectively.

border-width

CSS-свойство border-width определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства border .

    : medium : medium : medium : medium
    : абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden : абсолютная длина или 0 , если border-left-style (en-US) — none или hidden : абсолютная длина или 0 , если border-right-style (en-US) — none или hidden : абсолютная длина или 0 , если border-top-style (en-US) — none или hidden
    : длина : длина : длина : длина

Синтаксис

Values

Is a keyword indicating that all four values are inherited from their parent’s element calculated value.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *