## 概要
以下のように見出しの文字列の長さにあわせて、下線を表示したい。
![[Pasted image 20231009114218.png|frame]]
## ソリューション
[[Reading view]]と[[Editing view]]、それぞれのケースについて紹介します。どちらも[[CSS]]で実現可能です。
### [[Editing view]]
`border-bottom`を設定します。
```css
/* 見出し2 (##) の場合 */
.cm-header-2 {
border-bottom: 2px solid;
}
```
### [[Reading view]]
`border-bottom`を設定したうえで、`display: table`を指定します。
```css
/* 見出し2 (##) の場合 */
.markdown-preview-view h2 {
display: table;
border-bottom: 2px solid;
}
```
> [!attention]
> `display: table`を指定しないと、表示領域いっぱいに下線が表示されてしまいます。
>
> ![[Pasted image 20231009114949.png|frame]]
> *`display: table`を指定しない場合*
>