如何为表示时间轴中箭头的 ::before 元素的背景着色

Question

我有一个 jquery 插件可以提供时间轴。我希望能够为每个时间轴元素附带的小箭头的背景着色。

https://jsfiddle.net/LNMSchneiderman/Ljfw9xg4/2/

<div class="timeline">
  <div class="timeline__wrap">
    <div class="timeline__items">
    
      <div class="timeline__item ">
        <div class="timeline__content news">
          <h2>Jan. 5, 2020</h2>
          <p>news item</p>
        </div>
      </div>
      
      <div class="timeline__item">
        <div class="timeline__content news">
          <h2>Jan. 31, 2020</h2>
          <p>news item</p>
        </div>
      </div>
       </div>
  </div>
</div>

$('.timeline').timeline({
      mode:'vertical',
    });

箭头的伪元素是这样创建的：

.timeline__content:before {
    border-bottom: 10px solid transparent;
    border-left: 12px solid #ccc;
    border-top: 10px solid transparent;
    right: -12px;
    z-index: 1;
}
.timeline__content:after, .timeline__content:before {
    content: '';
    height: 0;
    position: absolute;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    width: 0;
}

但我似乎没有改变那个小箭头的背景颜色。谁能帮我处理这段代码？

Answer 1

值得查看浏览器的开发工具，检查箭头元素以准确了解它是如何形成和着色的。

这是您 fiddle 的前后对比：

之前您可以看到颜色为浅灰色。我把它改成了红色：

如您所见，您需要更改左边框设置。

注意：border-left-color 在这种情况下不能单独使用，请在边框 shorthand 版本中更改颜色：

border-left: 12px solid red;

如何为表示时间轴中箭头的 ::before 元素的背景着色

how to color the background of a ::before element that represents an arrow in a timeline

css

pseudo-element