javascript - 管道放置下划线底部字母 Angular

Question

我想要得到第一个字母并在底部添加下划线。 获取第一个字母并进行转换的代码

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'underlinePrimeiraLetra'
})
export class underlinePrimeiraLetraPipe implements PipeTransform {
  transform(value: string, args: any[]): string {
    if (value === null) return;
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

但是要在字母下添加下划线，我该怎么办？

如果我这么做

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'underlinePrimeiraLetra'
})
export class underlinePrimeiraLetraPipe implements PipeTransform {
  transform(value: string, args: any[]): string {
    if (value === null) return;
    return "<u>" + value.charAt(0).toUpperCase() + "</u>" + value.slice(1);
  }
}

未显示正确:

Answer 1

您只能使用 CSS 来做到这一点，使用 ::first-letter 选择器:

p::first-letter {
  text-transform: capitalize;
  text-decoration: underline;
}

<p>underline & capitalize my first letter !</p>