How to change text underline's line width in CSS

Question

I want output as follows btw currently I'm using bellow CSS to do this

.text-underline {
    border-bottom: 4px solid #f8f8f8;
    padding: 0 0 2px;
  }

But it applies to whole text are and I want to reduce width of this line

You'll want [pseudo elements](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) for that. — Mitya, Apr 08 '20 at 19:08
a great article for that https://css-tricks.com/styling-underlines-web/ — Ahmed Gaafer, Apr 08 '20 at 19:10

score 2 · Answer 1 · answered Apr 08 '20 at 19:14

2

It's very simple using a pseudo element:

.text-underline:after {
  display: block;
  height: 0;
  width: 5%; /* any width of your choice with any units e.g. px, em... */
  border-bottom: 4px solid #ff0000;
  content: "";
}

answered Apr 08 '20 at 19:14

Arbel

30,599
2
28
29

score 0 · Answer 2 · answered Apr 08 '20 at 19:14

It's possible with pseudo-elements, like this:

span {
  position: relative;
  font-weight: bold;
  font-size: 20px;
}

span::after {
  display: block;
  content: '';
  width: 40px;
  height: 2px;
  background-color: red;
}

<span>Search Options</span>

score -1 · Answer 3 · answered Apr 08 '20 at 19:11

-1

You have selected the entire item and need to use an element like span to isolate the "Search" part of your HTML

<h1> <span class="text-underline"> Search </span> Options </h1>

Try that out

answered Apr 08 '20 at 19:11

DeveloperKansas

1

How to change text underline's line width in CSS

3 Answers3