Dos colores diferentes dentro de un mismo enlace

Hola,
quiero seleccionar una parte del texto de un hreff para darle un color diferente. Es decir, que dentro de un menú, un sólo enlace tenga tenga dos colores. ¿Cómo lo puedo hacer?
He probado con pseudo lementos y pseudo clases pero no me sale.
Este es el html que tengo, y quiero que lo que hay antes del <br> y después, tengan diferente color:

Código HTML :

<nav>
            
   <ul>
      <li class="rosa"><a href="..." title="...">digital y offset <br>impresión</a></li>
      <li class="berde"><a href="..." title="...">gráfico y web <br>diseño</a></li>
      <li class="naranja"><a href="..." title="...">otros <br>servicios</a></li>
   </ul>
               
</nav>

Muchas gracias.

Encierra la parte del texto que quieres cambiar de color con <span>:

Código HTML :

<nav>
            
   <ul>
      <li class="rosa"><a href="..." title="...">digital y offset <br><span style="color: red;">impresión</span></a></li>
      <li class="berde"><a href="..." title="...">gráfico y web <br>diseño</a></li>
      <li class="naranja"><a href="..." title="...">otros <br>servicios</a></li>
   </ul>
               
</nav>

Ah!, y verde se escribe verde y no "berde"

Gracias!

Por cierto, ya que estamos, si quieres poner la segunda parte del enlace en una línea diferente, ya que vas a encerrarla en el span puedes usar display:block y clear:left y quitar ese <br>.
Es buena práctica prescindir de etiquetas como br y dejar lo referente a la presentación al CSS

Vale, gracias, ya voy a probar!
Y ya de pas que estamos... Hay alguna manera de reducir el interlineado? Ya que el line-height no tiene negativos, hay algún truco para hacerlo?
Muchas gracias!!

Con line-height. Cada cuerpo de la tipografía tiene una medida en pixel pero también puedes usar valores de cuerpo en line-height.

El line-height por defecto creo que es de 1.2(em), pero el recomendado para mejor lectura es 1.5, si pones menos que eso las líneas sea acercarán, de hecho si pones 0 es probable que se monten unas sobre otras

Lo que me pasa es que quiero que se junten las lineas, pero no me sale con el line-height, sólo consigo que se me separen.

¿A qué te refieres con que se junten las líneas y qué valores estás usando con line-height?

Lo que quiero decir es que quiero poner un interlineado más pequeño que el estandar, para que las dos lineas se acerquen. Pero si uso por ejemplo line-height: 1.1 em o 0.8em, se queda con el line-height predeterminado.
No sé si me explico...

No uses el la unidad "em", ahora que lo pienso, line-height no la soporta no debí ponértela allí porque ibas a confundirte, line-height acepta px, % y un multiplicador del tamaño de la fuente, que es sin colocar un símbolo de unidad:

Código HTML :

p{
   line-height:20px;     /*Correcto*/
   line-height: 20%;     /*Correcto*/
   line-height: 1.2;     /*Correcto*/
   line-height:1.2em;  /*Incorrecto*/
}

Si tienes tiempo y entiendes inglés, mira esta presentación sobre line-height, no tiene desperdicio http://www.slideshare.net/maxdesign/line-height