【CSS】hrタグで区切り線を使用するが、縦線になる問題

<hr>タグは、横線を引くときに使うHTMLのタグです。

今回は、<hr>タグを使用しているにもかかわらず、縦線になる解決方法をご紹介します。

縦線になってしまったCSSコード

hr.case-line {
    border-top: 1px dashed #ccc;
}

これではだめでした・・・

解決方法をご紹介します。

<hr class="case-line">

hr.case-line {
    border: none;
    border-top: 2px dashed #ccc;
    width: 93%;
    margin: 1em auto;
}

margin: 1em auto;　を使用すると解決できました！

width: 93%;　はお好みの長さに指定してください！