pseudo element for creating a triangle in sass

file.css.scss

// triangle
&:after {
  left: 50%;
  position: relative;
  display: inline-block;
  border-right: 6px solid transparent;
  border-top: 6px solid $blue; // change with border-bottom for triangle pointing up
  border-left: 6px solid transparent;
  content: '';
}

//circle
&:after {
  border-radius: 1px;
	width: 10px;
	height: 10px; 
	position: absolute;
	background-color: black;
}