border边框部分不显示

最新推荐文章于 2024-04-25 18:36:27 发布

素味平生

最新推荐文章于 2024-04-25 18:36:27 发布

阅读量8.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_40701522/article/details/89476921

前端专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一种使用CSS伪类选择器为标题元素创建下划线效果的方法，通过设置before伪元素并调整其位置和背景颜色，可以实现美观且响应式的标题下划线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下

<div class="session-title">健康概况</div>
<div class='session-con'></div>

本身是无法实现的，需要借助伪类选择器完成

.session-title {
    width: 38.4%;
    height: 18.11%;
    font-size: 18px;
    color: #333333;
    letter-spacing: -0.69px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-bottom: 1px solid #F0EEF0;
    background: #F0EEF0;
    position: relative;
}

.session-title:before {
    content: "";
    position: absolute;
    z-index: 999;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: #F0EEF0;
}

.session-con{
    width: 200px;
    height: 150px;
    border: 1px solid white;
}