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

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

1 border-bottom配合width

<html>

<head>
    <style>
        p {
            border-bottom: 1px solid red;
        }
    style>
head>

<body>
    <p>选中内容p>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

可以设置p标签的宽度，来改变border长度

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

在这里插入图片描述

2 使用after伪元素

<html>

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

<body>
    <div><p>选中内容p>div>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

相关阅读:
Oracle sqlnet.ora配置文件
grpc的metadata---拦截器--验证器--状态码-yapi安装
傅里叶变换
大数据安全认证
HG/T 5367.5-2022 轨道交通车辆用防结冰涂料检测
Discord OAuth2授权以及机器人监听群事件
简单讲解Android Fragment（四）
抽象轻松测试接口API
Android 获取某月所有的日期和星期
【英雄哥六月集训】第 29天: 分而治之

原文地址：https://blog.csdn.net/weixin_43915401/article/details/127885799