html - 如何使用CSS创建带有数字点的垂直线？

我想在[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类之间创建了一条垂直线，但我也希望每年在该垂直线上都设置粗点。每年如何显示点？

最佳答案

您可以这样构造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; }。

这应该使您正确地开始正确的道路。如果您再提出一些更具体的问题，其他用户将更容易指导您前进。

关于html - 如何使用CSS创建带有数字点的垂直线？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55789901/