How to underline only a few letters of a word with CSS?

To do what you ask the simplest is to wrap the content you want to underline in a <span></span> tag.

.sub {
  text-decoration: underline;
}

<h1><span class="sub">Tit</span>ulo</h1>

<span></span> It is an HTML tag that establishes a online element to which you can add attributes of this language, such as class="" or id="" .

These attributes used from CSS help you to add the style properties you need and apply to the content that the span involves.

There are pseudo-elements in CSS that allow us to also select only certain content.

p:first-letter{} /*Aplica las propiedades a la primera letra de cada p*/
p:first-line{} /*Aplica las propiedades a la primera linea de cada p*/

The best way would be to simply use a custom span .

If you want to achieve a similar effect, but you can put a bottom-border to 3 letters, it would be using a width% customizable width

Example span :

/* Default reset */

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: green;
}

span {
  border-bottom: 3px solid red;
}


/* Efecto hover - span */

a:hover span {
  border-bottom: 3px solid green;
}

<!-- Usando span -->
<a href="#"><span>Hol</span>a Mundo</a>

Now if you want to use a customizable width I leave you an alternative example using before .

Example before :

/* Default reset */

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: green;
}

.under-line:before {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  border-bottom: 3px solid red;
  width: 30px;
  /* Ancho personabizable */
}

.under-line {
  display: block;
  position: relative;
}


/* Efecto hover - :before */

a:hover.under-line:before {
  border-bottom: 3px solid green;
}

<!-- Usando :before -->
<a href="#" class="under-line">Usando before</a>

In html5 with css3 you can use the tag

<mark>Texto subrayado</mark>

I leave the link to w3schools here .