How to apply border for text in css?

user_15916627 0
Viewed 72

Here I have a div with steps as Step 1, Step 2, Step 3 in which Step 1 contains active class so it will have the blue border.

Working Snippet:

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

Requirement:

Here the blue border needs to be applied to only the text Step 1 and not to its entire width of 20%.

Expected Output:

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

I have tried applying position: absolute; to the .active class but it doesn't work as intended.

Kindly please help me to apply border-bottom: 2px solid blue only to the text and not the entire width of the div element.

flexbox css-selectors border css html
3 Answers

You can give justify-content: flex-end to .inline-flex, then reset the width of the first element to initial:

Edit

If you want the spaces between the texts are equal, use a fixed padding-left instead give them 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>

user_102892650

use span

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

Admin1

If that's what you wanted, Simply wrap your text in paragraph tag and in style apply border to paragraph instead of whole 20% width 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>

Admin1
Related