Question

我使用了CSS Timeline Example中的一些代码。

我已经调整了CSS中的每个元素，以便我可以使用class="timeline"设置所有元素的样式，因为我在其他地方有其他li元素，我不想修改它们。但是我在某个地方出错了，我错过了点和箭头。我需要改变什么？

我的CSS：

/* ---- Timeline ---- */

ol.timeline {
	position: relative;
	display: block;
	margin: 100px;
	height: 4px;
	background: #9b2;
}
ol::before.timeline,
ol::after.timeline {
	content: "";
	position: absolute;
	top: -8px;
	display: block;
	width: 0;
	height: 0;
  border-radius: 10px;
	border: 10px solid #9b2;
}
ol::before.timeline {
	left: -5px;
}
ol::after.timeline {
	right: -10px;
	border: 10px solid transparent;
	border-right: 0;
	border-left: 20px solid #9b2;
  border-radius: 3px;
}

/* ---- Timeline elements ---- */

li.timeline {
	position: relative;
	top: -77px;
	display: inline-block;
	float: left;
	width: 150px;
	transform: rotate(-45deg);
	font: bold 14px arial;
}
li::before.timeline {
	content: "";
	position: absolute;
	top: 3px;
	left: -29px;
	display: block;
	width: 6px;
	height: 6px;
	border: 4px solid #9b2;
	border-radius: 10px;
	background: #eee;
}

/* ---- Details ---- */

.details {
	display: none;

	position: absolute;
	left: -85px;
	top: 60px;
	padding: 15px;
	border-radius: 3px;
	border-right: 2px solid rgba(0,0,0,.1);
	border-bottom: 2px solid rgba(0,0,0,.1);
	transform: rotate(45deg);
	font: 12px arial;
	background: #fff;
}
.details::before {
	content: "";
	position: absolute;
	left: 10px;
	top: -9px;
	display: block;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-bottom-color: #fff;
	border-top: 0;
}

/* ---- Hover effects ---- */

li:hover.timeline {
	cursor: pointer;
  color: #28e;
}
li:hover::before.timeline {
	top: 1px;
	left: -31px;
	width: 8px;
	height: 8px;
	border-width: 5px;
	border-color: #28e;
}
li:hover.timeline .details {
	display: block;
  color: #444;
}

 <ol class="timeline">
  <li class="timeline">
    Point 1
    <span class="details">
      Description of point 1
    </span>
  </li>
  <li class="timeline">
    Point 2
    <span class="details">
      Description of point 2
    </span>
  </li>
  <li class="timeline">
    Point 3
    <span class="details">
      Description of point 3
    </span>
  </li>
</ol>

Answer 1

li::before.timeline无效。你可能想要使用

li.timeline::before

您的css中存在多个实例。

这是因为你的伪元素（无论是::before还是::after元素）必须放在你的选择器之后

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

li.timeline:before

即。删除第二个冒号，因为这会增加旧版浏览器的浏览器兼容性。

<强>演示：

＆＃13;

/* ---- Timeline ---- */

ol.timeline {
  position: relative;
  display: block;
  margin: 100px;
  height: 4px;
  background: #9b2;
}
ol.timeline:before,
ol.timeline:after {
  content: "";
  position: absolute;
  top: -8px;
  display: block;
  width: 0;
  height: 0;
  border-radius: 10px;
  border: 10px solid #9b2;
}
ol.timeline:before {
  left: -5px;
}
ol.timeline:after {
  right: -10px;
  border: 10px solid transparent;
  border-right: 0;
  border-left: 20px solid #9b2;
  border-radius: 3px;
}
/* ---- Timeline elements ---- */

li.timeline {
  position: relative;
  top: -77px;
  display: inline-block;
  float: left;
  width: 150px;
  transform: rotate(-45deg);
  font: bold 14px arial;
}
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;
}
/* ---- Details ---- */

.details {
  display: none;
  position: absolute;
  left: -85px;
  top: 60px;
  padding: 15px;
  border-radius: 3px;
  border-right: 2px solid rgba(0, 0, 0, .1);
  border-bottom: 2px solid rgba(0, 0, 0, .1);
  transform: rotate(45deg);
  font: 12px arial;
  background: #fff;
}
.details:before {
  content: "";
  position: absolute;
  left: 10px;
  top: -9px;
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #fff;
  border-top: 0;
}
/* ---- Hover effects ---- */

li.timeline:hover {
  cursor: pointer;
  color: #28e;
}
li.timeline:hover:before {
  top: 1px;
  left: -31px;
  width: 8px;
  height: 8px;
  border-width: 5px;
  border-color: #28e;
}
li.timeline:hover .details {
  display: block;
  color: #444;
}

＆＃13;

<ol class="timeline">
  <li class="timeline">
    Point 1
    <span class="details">
      Description of point 1
    </span>
  </li>
  <li class="timeline">
    Point 2
    <span class="details">
      Description of point 2
    </span>
  </li>
  <li class="timeline">
    Point 3
    <span class="details">
      Description of point 3
    </span>
  </li>
</ol>

＆＃13;

进一步阅读

Answer 2

您需要在:: 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;
}

请参阅此处的工作示例http://jsfiddle.net/yevcnctu/1/

在http://www.w3schools.com/cssref/sel_before.asp

查看更多信息可能是个好主意

水平时间线缺少点

2 个答案: