以下のデザインをコーディングする方法

Question

以下のデザインをコーディングする際に皆さんがどのように書くのか、知りたいです。

※特に文字の右にある、少しだけの線の表し方など！

どうぞ、よろしくお願いいたします。

Comments

[hentaiman]

文字の右の少しの線って「|」のことですか？

[Taka.K1009]

そうです！

[hentaiman]

貼ってある画像の通りの見た目なら縦線無しのテーブルタグで書いて文字の先頭に|をそのまま書くが・・・
一回自分ならどういうhtml書くか書いてみたらどうですか？そうしたらどんなイメージを考えてるのか分かるかもしれません。分からないかもしれませんが。

[Taka.K1009]

自分で書いた際に、「l」が上と下の線に繋がってしまったため、その際は私はpadding使ってみたり、全く0から作り直しtableタグをやめて作ってみたりと色々試していたので、他の方はどのように書くのか見てみたく、投稿しました。

[hentaiman]

だからそれを載せればいいでしょう？ちょっとした修正で済むならその方法を回答してくれる人だっているかもしれない

Answer 1

丸投げなので雑に回答しますが少しだけの線を作るときには

疑似要素を使ったりしますね。 before after ってやつですね。

【CSS】擬似要素を用いて線を引く方法

【CSS】borderの長さを調整する方法3つ：文字に応じて可変など

CSSの擬似要素beforeとafterとは？

Answer 2

参考にしてください。
https://qiita.com/akiyamaT/items/2e12feaf4ce68f8c4ed1

Answer 3

td{
  border-left: solid 1px #000
}
td:last-of-type{
  border-right: solid 1px #000
}

Answer 4

border-rightでできると思います！！！