<ol class="work_flow">
 	<li>
		<h2>まずアカウントを作りましょう</h2>
		<p>"SignUp"ボタンを押下して、登録画面からアカウント登録を行ってください。</p>
 	</li>
 	<li>
		<h2>マイページにログインします</h2>
		<p>登録が完了したら、"SignIn"ボタンを押下して、マイページにログインします。</p>
 	</li>
 	<li>
		<h2>基本情報を充実させましょう</h2>
		<p>マイページにログインしたら、まず基本情報を入力して、情報を充実させましょう。</p>
 	</li>
</ol>
ol.work_flow {
	display: block;
	margin: 50px 30px;
	padding: 0px;
	
  	counter-reset: item;
	list-style-type: none;
	
	> li {
		display: block;
		margin: 0px;
		padding: 5px 0px 5px 30px;
		position: relative;

		&:last-of-type {
			border-color: transparent;
		}

		&::before {
			display: flex;
			width: 40px;
			height: 40px;
			position: absolute;
			top: 0px;
			left: 1px;
			z-index: 2;

			counter-increment: item;
			content: counter(item);
			align-items: center;
			justify-content: center;
			font-size: 22px;
			font-weight: bold;
			background: lightgray;
			border-radius: 50%;
			transform: translate(-50%, 0%);
		}
		
		&::after {
			display: block;
			width: 2px;
			height: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 1;
			
			content: '';
			background-color: #666;
			background-image: linear-gradient(0deg, #fff 50%, transparent 50%);
			background-size: 4px 4px;
		}
	}
}

h2 {
	margin: 0px;
	font-size: 20px;	
}

p {
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.