如何为 css 中的文本应用边框？

Question

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

工作代码段：

.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 class 但它没有按预期工作。

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

Answer 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>

Answer 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>

Answer 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>

如何为 css 中的文本应用边框？

How to apply border for text in css?

html

css

flexbox

css-selectors

border

编辑