【css】使用伪元素实现在DOM元素前面加字母L形式的展开收起样式

本文链接：https://blog.csdn.net/weixin_42342065/article/details/135382546

前言：
平常工作中可能会遇到很多特殊的需求，比如开发个三角、圆形、正方形、长方形、L字母等的图形，很难找到现成的组件使用，所以就需要自己去开发了，比较常用也比较好用的方式是伪元素::before(在元素前面添加内容)，::after(在元素后面添加内容)。
下面是我写的L字母可以用于层级关系的展开收起。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body{
	position: relative;
}
div{
	font-family:"Times New Roman";
	font-size:20px;
	border: 1px black solid;
	width: 200px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 60px;
	margin-top: 200px;
}
div::before {
  content: '';
  position: absolute;
  left: 32px;
  top: -30px;
  height: 80%;
  border-left: 2px solid #d5d3d3;
}

div::after {
  content: '';
  position: absolute;
  left: 32px;
  top: 50px;
  width: 20px;
  height: 10px;
  border-top: 2px solid #d5d3d3;
}
</style>
</head>

<body>
<div>L字母展开收起。</div>

</body>
</html>