css 改变下划线长度，伪元素模拟border

2024-07-12 11:36| 来源: 网络整理| 查看: 265

要实现文字下方下划线在这里插入图片描述

1 border-bottom配合width p { border-bottom: 1px solid red; } 选中内容

直接设置border-bottom，会由于p标签宽度默认100%，导致下划线过长在这里插入图片描述蓝色背景即content盒子，设置的border其实是content的下边框可以设置p标签的宽度，来改变border长度

p { border-bottom: 1px solid red; width: fit-content; /* 宽度自动适配内容 */ }

在这里插入图片描述

2 使用after伪元素 div { position: relative; /* 外面套一层relative，方便伪元素定位，不然就要更具body定位了*/ } p::after { content: ''; /* 必须设置 content 属性才能生效 */ width: 100px; /* 下划线长度*/ height: 2px; /* 下划线高度*/ background-color: red; /* 下划线颜色*/ position: absolute; /* 下划线位置*/ left: 0px; /* 下划线位置*/ top: 20px; /* 下划线位置，可以参考行高来设置*/ } 选中内容

在这里插入图片描述下划线的位置比较容易改，但是这个宽度emmm，真滴不知道如何适配

【本文地址】

公司简介

联系我们