<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{list-style: none;}
.box1{width: 400px;height: 600px;float: left;}
.box2{width: 600px;height: 600px;float: left;}
div{width: 100px;height: 2px;background: blue;}
p{font-size: 30px;font-family: 宋体;}
li{cursor: pointer;}
li:hover {color: blue;transition: .5s;}
li:hover div{width: 250px;transition: .5s;}
</style>
</head>
<body>
<section class="box1">
<ul>
<li>
<div></div>
<p>我校学工体系扎实做好学风建设工作</p>
</li>
<li>
<div></div>
<p>我校荣获第二届“辽宁省文明校园”称号</p>
</li>
<li>
<div></div>
<p>我校44门课程获批2020年省级一流本科课程</p>
</li>
</ul>
</section>
<section class="box2">
<ul>
<li>
<div></div>
<p>大连东软信息学院高等职业技术学院依托“微党校”创新基层党建工作模式</p>
</li>
<li>
<div></div>
<p>我校获批“辽宁省高校辅导员名师工作室”</p>
</li>
<li>
<div></div>
<p>我校学生在2020年辽宁省普通高等学校本科大学生创新创业系列竞赛中 喜获439项奖项</p>
</li>
</ul>
</section>
</body>
</html>
我写的代码中设置横线div统一为width: 100px;height: 2px;background: blue;，但是显示结果却不一样？上下的粗，中间的细？
