bartaz · May 14, 2021 13:15
diff --git a/dabblet.css b/dabblet.css
 /*
 	Two circles connected with a line.
 	See: https://github.com/bartaz/impress.js/issues/460
 */

 body {
 	background: #BADA55;
 }

 .step {
 	position: absolute;
 	height: 100px;
 	width: 100px;
 	border-radius: 50%;
 	background: white;
 	
 	line-height: 100px;
 	text-align: center;
 }

 .step-one {
 	top: 10px;
 	left: 10px;
 }

 /* line as pseudo element in step one */
 .step-one::after {
 	content: "";
 	
 	/* position it in the middle of the circle */
 	position: absolute;
 	top: 50%;
 	left: 50%;

 	/* connect circles with a line */
 	width: 200px;
 	height: 0;
 	border-bottom: 3px solid black;
 	
 	/* make sure it's behind the circles */	
 	z-index: -1;
 }

 .step-two {
 	top: 10px;
 	left: 200px;
 }
diff --git a/dabblet.html b/dabblet.html
 <div class="step step-one">One</div>
 <div class="step step-two">Two</div>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/*
	Two circles connected with a line.
	See: https://github.com/bartaz/impress.js/issues/460
	*/

	body {
	background: #BADA55;
	}

	.step {
	position: absolute;
	height: 100px;
	width: 100px;
	border-radius: 50%;
	background: white;

	line-height: 100px;
	text-align: center;
	}

	.step-one {
	top: 10px;
	left: 10px;
	}

	/* line as pseudo element in step one */
	.step-one::after {
	content: "";

	/* position it in the middle of the circle */
	position: absolute;
	top: 50%;
	left: 50%;

	/* connect circles with a line */
	width: 200px;
	height: 0;
	border-bottom: 3px solid black;

	/* make sure it's behind the circles */
	z-index: -1;
	}

	.step-two {
	top: 10px;
	left: 200px;
	}
	<div class="step step-one">One</div>
	<div class="step step-two">Two</div>