通过css控制边框的长度
需求
最近做一个小demo,其中的一个需求是div标签的bottom有边框,且边框的长度不能与div的宽度等宽。
思路
通过伪类选择器实现,配合content在元素周围设置内容,可以将content的内容设置为" ",然后通过修改样式来改变边框的效果
实现
HTML结构
<div class="head"> <div class="headTitle">核酸检测</div> <div class="headTitle">接种点</div> </div>
CSS样式
.head{ display: flex; width: 375.2px; height: 50px; .headTitle{ flex: 1; overflow: hidden; text-align: center; margin-top: 15px; font-weight: bold; color: rgb(132, 107, 255); } .headTitle::before{ background-color: currentColor; border-radius: 0.2rem; bottom: 625px; content: ' '; height: 2.5px; position: absolute; transform: translateX(25%); width: 0.6rem; } }
效果图