CODEWITHSUNDEEP
htmlcss
doohsam
doohsam

Reputation: 47

Horizontal timeline missing dots

I've used some code from CSS Timeline Example.

I've tweaked each element in the CSS so that I can style all elements with class="timeline" because I have other li elements elsewhere that I don't want to modify. However I've gone wrong somewhere and I'm missing the dots and the arrow. What do I need to change please?

My 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>

Upvotes: 2

Views: 938

Answers (2)

jbutler483
jbutler483

Reputation: 24559

li::before.timeline isn't valid. you may mean to use 

li.timeline::before

This is the case for multiple instances in your css.

This is because your pseudo element (whether that be the ::before or ::after element) must be placed after your 'selector'

Please also note you may wish to alter your pseudo element declaration to

li.timeline:before

i.e. remove the second colon as this increases browser compatibility on older browsers.

Demo:

/* ---- 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;
}
<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>

further Reading

Upvotes: 2

Dominic Green
Dominic Green

Reputation: 10258

You need to declare your class correctly before the ::before selector.

You have 

li::before.timeline

Which will not work instead you need 

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;
}

See a working example here http://jsfiddle.net/yevcnctu/1/

Its probably a good idea to check out more information at http://www.w3schools.com/cssref/sel_before.asp

Upvotes: 1

Related Questions