如何在css中为文本应用边框？答案

【问题标题】：How to apply border for text in css?如何在css中为文本应用边框？
【发布时间】：2021-09-08 13:29:53
【问题描述】：

这里我有一个 div，其步骤为 Step 1、Step 2、Step 3，其中第 1 步包含活动类，因此它将具有蓝色边框。

工作片段：

.inline-flex {
  display: inline-flex;
  width: 20%;
  border-bottom: 2px solid black;
}

.active {
  border-bottom: 2px solid blue;
}

<div class="inline-flex active">Registration</div>
<div class="inline-flex">User</div>
<div class="inline-flex">Professional Information</div>

要求：

这里的蓝色边框只需要应用于文本Step 1，而不是应用于其整个宽度的 20%。

预期输出：

Step 1             Step 2           Step 3
-blue- ---black----black continues--------

我尝试将position: absolute; 应用于.active 类，但它没有按预期工作。

请帮助我将border-bottom: 2px solid blue 仅应用于文本，而不是 div 元素的整个宽度。

【问题讨论】：

将活动文本包裹在一个 span 中，并设置 span 标签的样式。

标签： html css flexbox css-selectors border

【解决方案1】：

使用跨度

.inline-flex {
  display: inline-flex;
  width: 20%;
  border-bottom: 2px solid black;
}

.active-span {
  border-bottom: 2px solid blue;
}

<div class="inline-flex active"><span class="active-span">Step 1</span> </div>
<div class="inline-flex">Step 2</div>
<div class="inline-flex">Step 3</div>

【讨论】：

【解决方案2】：

您可以将justify-content: flex-end 赋予.inline-flex，然后将第一个元素的width 重置为initial：

编辑

如果您希望文本之间的空格相等，请使用固定的padding-left，而不是给它们width：

.inline-flex {
  display: inline-block;
  border-bottom: 2px solid black;
  padding-left: 100px;
}

.inline-flex:first-child {
  padding-left: initial;
}

.active {
  border-bottom: 2px solid blue;
}

<div class="steps">
  <div class="inline-flex active">Registration</div>
  <div class="inline-flex">User</div>
  <div class="inline-flex">Professional Information</div>
</div>

【讨论】：

感谢您的回答，但如果步骤的文本较大，则它占用的空间不相等。请看这里codepen.io/Maniraj_Murugan/pen/poeMpGL
在实际应用中，每一步的文本只会像上面那样。所以每一步文本之间的间距需要相等..
@HelloWorld 请检查更新后的答案。

【解决方案3】：

如果这是您想要的，只需将您的文本包装在段落标签中，并在样式中将边框应用于段落而不是整个 20% 宽度的 inline-flex

.inline-flex {
  display: inline-flex;
  width: 20%;
}

.inline-flex p {
  border-bottom: 2px solid black;
}

.active p {
  border-bottom: 2px solid blue;
}

<div class="inline-flex active ">
  <p>Registration</p>
</div>
<div class="inline-flex">
  <p>User</p>
</div>
<div class="inline-flex">
  <p>Professional Information</p>
</div>

【讨论】：