Как я могу добавить вертикальные линии, которые будут идти от рамки до нижней части блока?

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

```css
.block {
    position: relative;
    border: 1px solid #000;
    height: 200px;
    width: 200px;
}

.block::before,
.block::after {
    content: '';
    position: absolute;
    border-left: 1px solid #000;
    bottom: 0;
}

.block::before {
    left: 25%;
    top: 0;
}

.block::after {
    left: 75%;
    top: 0;
}
```

В этом примере у блока есть две вертикальные линии, которые идут от верхней рамки до нижней части блока. Они расположены по 25% и 75% ширины блока от левого края.

Если вы хотите ввести строгие размеры, вы можете использовать `px` или `em` вместо `%`. Чтобы линия шла от нижней рамки до верхней части блока, просто поменяйте местами `top: 0;` и `bottom: 0;` в определениях `::before` и `::after`.

Убедитесь, что у вашего блока есть относительное позиционирование (`position: relative;`), чтобы псевдоэлементы были позиционированы относительно него.

Можно использовать псевдоклассы `::before` и `::after` в CSS для добавления дополнительных элементов перед и после выбранного элемента. 

Вам необходимо добавить два псевдокласса, `::before` и `::after`, и задать им нужные стили с использованием свойства `content`. В свойстве `content` вы можете указать текст, изображение или другое содержимое, которое должно отображаться перед или после выбранного элемента. Например:

```
.selector::before {
  content: "

";
}

.selector::after {
  content: "

";
}
```

Здесь `.selector` - это класс выбранного элемента, для которого вы хотите добавить псевдоклассы. Вы можете изменить содержимое и стили псевдоклассов `::before` и `::after` по своему усмотрению.