Creating horizontal line with small circles on each end

HTML & CSS
1

How would one go about creating a horizontal rule with a small solid circle (10px in diameter) on each end? I’ve searched online and experimented quite a bit, but haven’t been able to figure it out. Thanks in advance for any help.

2

Hi,

There’s lots of ways to do that, but you could do it with three elements like this


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
.rule {
  height: 4px;
  background: #000;
}
.rule:before, .rule:after {
  content: '';
  height: 10px;
  width: 10px;
  border-radius: 10px;
  float: left;
  background: #000;
  margin-top: -3px;
}
.rule:after {
  float: right;
}
</style>
</head>
<body>
<div class="rule"></div>
</body>
</html>
3

There are many ways to do something like that, but here’s my quick attempt:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">
.line {
	border-top: 1px solid #30353b;
	padding-top:5px;
	padding-bottom: 5px;
	margin: 40px auto 0;
	width: 80%;
	position: relative;
}

.line:before, .line:after {
	content: "";
	width: 10px;
	height: 10px;
	background: #30353b;
	border-radius: 5px;
	position: absolute;
	top: -6px;
}

.line:after {
	right: 0;
}
</style>
	
</head>
<body>

<div class="line"></div>

</body>
</html>
Edit:

Ha ha, Mark is much too quick for me. :slight_smile:

4

Perfect. Thanks for your help.

5

Yeah, you both were super quick. I really appreciate the help.

6

Great minds think alike.