如何仅使用 html 和 scss 在元素之前和之后分配不同的背景颜色?

Question

我用CSS画了一个圆圈，并给了它一个名为node的类。然后我用::after在这个圆上创建了一个中心线。

我正在尝试为这个圆圈的每一边分配不同的颜色。所以说圆的左侧应该有一条灰色的线，圆圈的右侧应该有一条蓝色的线。

我需要 10 次才能上传图像，所以我试图解释这种情况。

我试图使用::before和::after来确定要使用的颜色，但我无法实现。

.node,
.node-second,
.node-last,
.node-first {
background-color: #b2cae9;
border-radius: 50%;
width: 20px;
height: 20px;
}
.node::after {
content: "";
right: -50%;
right: 0;
top: 50%;
width: 100%;
position: absolute;
border: 2px solid #b2cae9;
z-index: -1;
}

<div class="timeline-wrapper d-flex flex-row align-items-center ">
<div class="timeline-child active d-flex flex-column align-items-center flex-grow-1">
<span class="date">18.01.2019</span>
<span class="node-first"></span>
<span class="text">Lorem İpsum Dot</span>
</div>
<div class="timeline-child active d-flex flex-column  align-items-center flex-grow-1">
<span class="date">18.01.2019</span>
<span class="node"></span>
<span class="text">Lorem İpsum Dot</span>
</div>
<div class="timeline-child d-flex flex-column  align-items-center flex-grow-1">
<span class="date">18.01.2019</span>
<span class="d-flex flex-grow-1 node"></span>
<span class="text">Lorem İpsum Dot</span>
</div>
</div>

Answer 1

你可以这样尝试。我使用了圆形元素，:before元素用于灰线，:after元素用于蓝线，并相应地定位了它。代码中缺少:before元素。我不得不编写 CSS，因为这里的代码片段不支持 ASS，但您可以使用此工具将其转换为 SASS：https://css2sass.herokuapp.com/

html,
body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.circle {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid black; /* Show the Circle */
position: relative;
}
.circle:before,
.circle:after {
content: "";
display: block;
width: 49vw;
height: 3px;
position: absolute;
}
.circle:before {
border-bottom: 4px solid grey; /* Show the blue line */
right: 12px;
}
.circle:after {
border-bottom: 4px solid #B2CAE9; /* Show the grey line */
left: 12px;
}

<div class="container">
<div class="circle">
</div>
</div>