文字をホバーした時に下にボーダーが伸びる処理

こちらをホバーすると赤い線が下に伸びます

	<p class="border-extend">こちらをホバーすると赤い線が下に伸びます</p>

/* 基本スタイル */
.border-extend {
	position: relative;
	text-decoration: none;
	color: #000000;
	display: inline-block;
	font-size: 1.5rem;
	line-height: 2.0rem;
	padding-bottom: 10px;
}
.border-extend::before {
    content: "#";
    color: #b22222;
}
/* ホバー時のボーダーが伸びるエフェクト */
.border-extend::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: #b22222;
	transition: width 0.3s ease;
}

/* ホバーしたときにボーダーが伸びる */
.border-extend::hover {
	cursor: pointer;
}
.border-extend:hover::after {
	width: 100%;
}