Как создать вертикальную линию с числом точек с помощью CSS?

Question

Мне нужны толстые точки в определенных местах по вертикальной линии между [div class = "col-md-4"] и [div class = "col-md-8"].

ниже я попробовал

<div class="col-md-4" style="border-right:1px solid #333;">
<h1>1987</h1><p>lorem ipsom .........</p>
<h1>1990</h1><p>lorem ipsom .........</p>
<h1>1998</h1><p>lorem ipsom .........</p>
</div>

<div class="col-md-8">
description
</div>

это создало вертикальную линию между классом 4 и классом 8, но я также хочу иметь жирные точки над этой вертикальной линией для каждого года. как я могу отображать точки для каждого года?

Answer 1

Вы можете структурировать свой HTML следующим образом:

<div class="timeline">
    <div class="timeline__item">
        <div class="timeline__item__date"> 1995 </div>
        <div class="timeline__item__text"> lorem ipsom </div>
    </div>
    <div class="timeline__item">
        <div class="timeline__item__date"> 2005 </div>
        <div class="timeline__item__text"> lorem ipsom </div>
    </div>
    ...
</div>

И продолжайте применять CSS вот так

.timeline__item {
    position: relative;
    width: 100%;
}

.timeline__item::before {
    /* required for the ::before pseudo-element to be rendered */
    content: '';

    /* positioning the element */
    position: absolute;
    left: 0; top: 50%;
    transform: translate(xvalue , -50%); /* change the xvalue to reposition horizontaly, to be where your 'line' is */

    /* creates the 'color-of-the-text colored circle' */
    width: 5px; height: 5px;
    background-color: currentColor;
    border-radius: 50%;
}

Если вы хотите переместить точку с левой стороны .timeline__item (там, где она в данный момент находится) вправо, измените .timeline__item::before { left: 0; } на .timeline__item::before { right: 0; }.

Это должно привести вас на правильный путь. Если вы вернетесь с более конкретными вопросами, другим пользователям будет легче направлять вас вперед.