Generated by SassMeister.com.

SassMeister-input-HTML.html

<hr>

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v)
// ----

@import "compass";

$pico-orange: orange;
$pico-gray: gray;

hr {
	position: relative;
	display: block;
	margin: 50px auto;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: $pico-orange;

//	&:before,
	&:before {
		content: "• •";
		position:  absolute;
		display: block;
		left:-25px; right:-45px;
		font-size:40px;
		letter-spacing:15px;
		line-height:20px;
		color: $pico-gray;
	//	top: 5px;
	//	height: 10px;
	//	width: 10px;
	//	border-radius: 50%;
	//	background: $pico-gray;
	}
	
	&:after {
	  left:-150px;
	  right:-150px;
	  position:absolute;
	  content:"";
	  height:1px;
	  background-color: #ccc;
	  @include background-image(linear-gradient(left, white, #bbb, white, #bbb, white));
	  z-index:-1;
	  display:block;
	  top:10px;
	}

//	&:before {left: -25px;}
//	&:after {right: -25px;}
}

SassMeister-output.css

@charset "UTF-8";
hr {
  position: relative;
  display: block;
  margin: 50px auto;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: orange;
}
hr:before {
  content: "• •";
  position: absolute;
  display: block;
  left: -25px;
  right: -45px;
  font-size: 40px;
  letter-spacing: 15px;
  line-height: 20px;
  color: gray;
}
hr:after {
  left: -150px;
  right: -150px;
  position: absolute;
  content: "";
  height: 1px;
  background-color: #ccc;
  background-image: -moz-linear-gradient(left, #ffffff, #bbbbbb, #ffffff, #bbbbbb, #ffffff);
  background-image: -webkit-linear-gradient(left, #ffffff, #bbbbbb, #ffffff, #bbbbbb, #ffffff);
  background-image: linear-gradient(to right, #ffffff, #bbbbbb, #ffffff, #bbbbbb, #ffffff);
  z-index: -1;
  display: block;
  top: 10px;
}

SassMeister-rendered.html

<hr>