Html 水平时间线缺少点

我使用了来自的一些代码

我已经调整了CSS中的每个元素，以便我可以使用

class=“timeline”

设置所有元素的样式，因为我不想修改其他

li

元素。然而，我在某个地方出错了，我错过了点和箭头。请问我需要换什么

我的CSS：

/*----时间线--*/
时间线{
位置：相对位置；
显示：块；
利润率：100像素；
高度：4px；
背景：#9b2；
}
ol:：before.timeline，
ol:：after.timeline{
内容：“；
位置：绝对位置；
顶部：-8px；
显示：块；
宽度：0；
身高：0；
边界半径：10px；
边框：10px实心#9b2；
}
ol:：before.timeline{
左：-5px；
}
ol:：after.timeline{
右：-10px；
边框：10px实心透明；
右边界：0；
左边框：20px实心#9b2；
边界半径：3px；
}
/*----时间线元素--*/
李：时间线{
位置：相对位置；
顶部：-77px；
显示：内联块；
浮动：左；
宽度：150px；
变换：旋转（-45度）；
字体：粗体14px arial；
}
李：在时间线之前{
内容：“；
位置：绝对位置；
顶部：3px；
左：-29px；
显示：块；
宽度：6px；
高度：6px；
边框：4px实心#9b2；
边界半径：10px；
背景：#eee；
}
/*----详情----*/
.详情{
显示：无；
位置：绝对位置；
左：-85px；
顶部：60px；
填充：15px；
边界半径：3px；
右边框：2倍实心rgba（0,0,0,1）；
边框底部：2倍实心rgba（0,0,0,1）；
变换：旋转（45度）；
字体：12px arial；
背景：#fff；
}
.详情：：之前{
内容：“；
位置：绝对位置；
左：10px；
顶部：-9px；
显示：块；
宽度：0；
身高：0；
边框：10px实心透明；
边框底色：#fff；
边界顶部：0；
}
/*----悬停效果----*/
李：悬停{
光标：指针；
颜色：#28e；
}
li：悬停：：before.timeline{
顶部：1px；
左：-31px；
宽度：8px；
高度：8px；
边框宽度：5px；
边框颜色：#28e；
}
李：悬停。时间线。细节{
显示：块；
颜色：#444；
}

第1点
对第1点的说明


第2点
对第2点的说明


第3点
对第3点的说明

li:：before.时间线

无效。你可能想用

li.timeline::before

css中的多个实例就是这种情况

这是因为伪元素（无论是

：before

还是

：：after

元素）必须放在“选择器”之后

---

还请注意，您可能希望将伪元素声明更改为

li.timeline:before

i、 e.删除第二个冒号，因为这增加了旧浏览器上的浏览器兼容性

---

演示：

/*----时间线--*/
时间线{
位置：相对位置；
显示：块；
利润率：100像素；
高度：4px；
背景：#9b2；
}
ol.时间线：之前，
ol.时间线：之后{
内容：“；
位置：绝对位置；
顶部：-8px；
显示：块；
宽度：0；
身高：0；
边界半径：10px；
边框：10px实心#9b2；
}
ol.时间线：之前{
左：-5px；
}
ol.时间线：之后{
右：-10px；
边框：10px实心透明；
右边界：0；
左边框：20px实心#9b2；
边界半径：3px；
}
/*----时间线元素--*/
李：时间线{
位置：相对位置；
顶部：-77px；
显示：内联块；
浮动：左；
宽度：150px；
变换：旋转（-45度）；
字体：粗体14px arial；
}
时间线：之前{
内容：“；
位置：绝对位置；
顶部：3px；
左：-29px；
显示：块；
宽度：6px；
高度：6px；
边框：4px实心#9b2；
边界半径：10px；
背景：#eee；
}
/*----详情----*/
.详情{
显示：无；
位置：绝对位置；
左：-85px；
顶部：60px；
填充：15px；
边界半径：3px；
右边框：2倍实心rgba（0,0,0,1）；
边框底部：2倍实心rgba（0,0,0,1）；
变换：旋转（45度）；
字体：12px arial；
背景：#fff；
}
.详情：在{
内容：“；
位置：绝对位置；
左：10px；
顶部：-9px；
显示：块；
宽度：0；
身高：0；
边框：10px实心透明；
边框底色：#fff；
边界顶部：0；
}
/*----悬停效果----*/
时间线：悬停{
光标：指针；
颜色：#28e；
}
时间线：悬停：之前{
顶部：1px；
左：-31px；
宽度：8px；
高度：8px；
边框宽度：5px；
边框颜色：#28e；
}
时间线：悬停。细节{
显示：块；
颜色：#444；
}

第1点
对第1点的说明


第2点
对第2点的说明


第3点
对第3点的说明

您需要在：：before选择器之前正确声明类

你有

li::before.timeline

这将不起作用，相反，你需要

li.timeline::before {
    content: "";
    position: absolute;
    top: 3px;
    left: -29px;
    display: block;
    width: 6px;
    height: 6px;
    border: 4px solid #9b2;
    border-radius: 10px;
    background: #eee;
}

请参见此处的工作示例

在网站上查看更多信息可能是个好主意