ざっと以下のようなコンポーネントを実装するといい。

import { css } from 'linaria';
import { ReactNode } from 'react';

type Props = {
  children: ReactNode;
};

const style = css`
  display: flex;
  padding: 4px 0;
  margin-left: 8px;
  position: relative;
  white-space: nowrap;
  z-index: 1;

  &:after {
    content: '';
    position: absolute;
    top: 12px;
    left: -6px;
    width: calc(100% + 6px);
    height: 12px;
    background: #fdfdfd;
    transform: skewX(-20deg);
    z-index: -1;
  }
`;

export const Underlined = ({ children }: Props) => {
  return <span className={style}>{children}</span>;
};

ポイント

skew

    transform: skewX(-20deg);

これで右方向に少し歪んだ図形が作れる。

z-index

あまり好ましい書き方ではないが、自分の考案した方法ではz-indexを使うほかなかった。他にいい方法があれば知りたい。