CSS实现底部边框圆角失效求助：如何为文本下划线添加圆角？

我明白你现在遇到的问题了——直接给元素加border-bottom和border-radius没法实现底部下划线两端的圆角，对吧？这是因为border-radius是作用在整个元素的四个角上，而不是单独给底部边框的两端加圆角。其他三边没有边框的话，圆角效果自然就显示不出来啦。

那咱们可以用伪元素来模拟底部边框，这样就能单独控制下划线的圆角了，完全不需要图片。下面是具体的修改方案：

步骤1：修改CSS样式 #

首先，移除原来的border-bottom属性，给目标元素添加position: relative，然后用::after伪元素来创建带圆角的下划线：

.footer_line { 
  white-space: nowrap; 
  margin-top: 12px; 
  font-weight: bold; 
  font-size: 36px; 
  width: 150px; 
  position: relative; /* 让伪元素基于该元素定位 */
  /* 移除原来的border-bottom和padding-bottom，或按需调整padding */
}

.footer_line::after {
  content: ""; /* 伪元素必须的属性 */
  position: absolute;
  bottom: 0; /* 下划线位置在元素底部 */
  left: 0;
  width: 100%; /* 下划线宽度和元素一致 */
  height: 4px; /* 下划线厚度，对应原来的border-bottom宽度 */
  background-color: #2782dd; /* 下划线颜色 */
  border-radius: 4px; /* 设置圆角，和厚度一致则为半圆角 */
}

.news_let { 
  margin-left: 0px !important; 
  margin-top: 37px !important; 
  font-weight: bold !important; 
  letter-spacing: 1px !important; 
  color: white !important; 
  font-size: 21px !important; 
  position: relative; /* 添加相对定位 */
  padding-bottom: 6px !important; /* 保留该值，让文字和下划线保持间距 */
  /* 移除原来的border-bottom */
}

.news_let::after {
  content: "";
  position: absolute;
  bottom: 0; /* 因存在padding-bottom，下划线会在padding的底部 */
  left: 0;
  width: 100%;
  height: 2px; /* 对应原来的border-bottom厚度 */
  background-color: #2782dd;
  border-radius: 2px; /* 圆角和厚度匹配 */
}

步骤2：处理样式冲突 #

因为你的<h3>同时应用了news_let和footer_line两个类，两个伪元素会叠加显示。你可以根据实际需求调整：

• 如果只想保留其中一个下划线样式，删除另一个类的伪元素代码即可；
• 如果需要两个不同样式的下划线，可以调整伪元素的width、bottom值来区分位置。

为什么这个方法有效？ #

伪元素是一个独立的匿名元素，我们可以完全控制它的形状、位置和圆角。通过将它定位在元素底部，就能完美模拟带圆角的底部边框效果，而且兼容性非常好。

内容的提问来源于stack exchange，提问作者Mr.M