Как правильно сделать наложение с прозрачностью?

Question

[karetsky]

Есть пунктирная линия и круги.
Как сделать так, чтобы круги оставались прозрачными, но при этом перекрывали пунктир (чтобы пунктира внутри кругов небыло видно)?


//Конечно, можно сделать не 1 пунктирную линию, а много, но может есть вариант и с 1 линией...

Comments

[AlexRas]

не получится с одной линией

Answer 1

[dm]

От кругов с помощью before и after в обе стороны абсолютноспозиционированные блоки с нулевой высотой и пунктирной рамкой.

.circle {
	position: relative;
}
.circle::before,
.circle::after {
	position: absolute;
	content: "";
	top: 5px;
	with: 100px;
	height: 0;
	border-top: 1px dotted white;
}
.circle::before {
	left: -100%;
}
.circle::after {
	right: -100%;
}