如何获得带圆角的边框底线

Question

我正在尝试添加圆角下划线，正如您在图片中“augmenter”和“visibilité sur internet”下看到的那样。

正如你在 sn-p 中看到的那样，我已经完成了一半。但我找不到一种方法来创建我的边界底部上角的半径（边界顶部右/左半径仅适用于边界顶部）。

你有什么解决办法吗？ 提前谢谢

p{
  font-size: 30px;
  line-height: 30px;
}
.primary-underline{
  text-decoration: none;
  border-bottom: 10px solid #06CC6B;
  border-bottom-right-radius : 10px;
  border-bottom-left-radius : 10px;
  line-height: 10px;
  display: inline-block;
}

<p>Nous aidons les artisans, commerçants, startups et PME à 
<span class="primary-underline">augmenter</span> leur 
<span class="primary-underline">visibilité sur internet</span></p>

Answer 1

使用伪元素：

p{
  font-size: 30px;
  line-height: 30px;
}
.primary-underline{
  text-decoration: none;
  display: inline-block;
  position:relative;
  z-index:0;
}
.primary-underline:before {
  content:"";
  position:absolute;
  z-index:-1;
  bottom:0;
  left:0;
  height:10px;
  width:100%;
  border-radius:10px;
  background:#06CC6B;
}

<p>Nous aidons les artisans, commerçants, startups et PME à 
<span class="primary-underline">augmenter</span> leur 
<span class="primary-underline">visibilité sur internet</span></p>

或者你可以考虑多背景：

p{
  font-size: 30px;
  line-height: 30px;
}
.primary-underline{
  text-decoration: none;
  display: inline-block;
  background:
    radial-gradient(farthest-side, #06CC6B 98%,transparent 100%) bottom right/10px 10px,
    radial-gradient(farthest-side, #06CC6B 98%,transparent 100%) bottom left /10px 10px,
    linear-gradient(#06CC6B,#06CC6B) bottom/calc(100% - 10px) 10px;
  background-repeat:no-repeat;
  
}

<p>Nous aidons les artisans, commerçants, startups et PME à 
<span class="primary-underline">augmenter</span> leur 
<span class="primary-underline">visibilité sur internet</span></p>

并通过一些 CSS 变量来更好地控制：

p{
  font-size: 30px;
  line-height: 30px;
}
.primary-underline{
  --s:10px;    /* height of the line */
  --c:#06CC6B; /* color*/

  text-decoration: none;
  display: inline-block;
  background:
    radial-gradient(farthest-side, var(--c) 98%,transparent 100%) bottom right/var(--s) var(--s),
    radial-gradient(farthest-side, var(--c) 98%,transparent 100%) bottom left /var(--s) var(--s),
    linear-gradient(var(--c),var(--c)) bottom/calc(100% - var(--s)) var(--s);
  background-repeat:no-repeat;
  
}

<p>Nous aidons les artisans, commerçants, startups et PME à 
<span class="primary-underline">augmenter</span> leur 
<span class="primary-underline" style="--s:15px;--c:pink">visibilité sur internet</span> et aussi à <span class="primary-underline" style="--s:5px;--c:orange;">faire autre chose</span></p>

Answer 2

使用放置在内容后面的伪元素来创建下划线效果。

演示：（根据需要调整值）

p{
  font-size: 30px;
  line-height: 30px;
}
.primary-underline{
  position: relative;
  display: inline-block;
  z-index:0;
}
.primary-underline:before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 0;
  border: 10px solid #06CC6B;
  border-radius : 10px;
}

<p>Nous aidons les artisans, commerçants, startups et PME à 
<span class="primary-underline">augmenter</span> leur 
<span class="primary-underline">visibilité sur internet</span></p>