before和after选择器

在科学上没有平坦的大道，只有不畏劳苦，沿着陡峭山路攀登的人，才有希望达到光辉的顶点——马克思

我们可以使用::before和::after去选择我们节点内部的首项或尾项

例如我这里代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.ruben-parent {
				width: 100%;
				border: 0.1em solid #ababab;
				text-align: center;
			}

			.ruben-parent::before,
			.ruben-parent::after {
				margin: 0 auto;
				content: '';
				display: block;
				width: 1em;
				height: 0.1em;
				background: #76838f;
				transition: 0.5s;
			}
			
			.ruben-parent:hover::before,
			.ruben-parent:hover::after {
				width: 100%;
				height: 1em;
			}
		</style>
	</head>
	<body>
		<div class="ruben-parent">
			<span>ruben</span>
		</div>
	</body>
</html>