<hr />をサイズ指定して際に、中央寄せになるので、左に寄せたい

Question

お疲れ様です。

下記ソースコードにて、hrの長さを指定したのですが、
中央寄せになってしまい、左寄せに出来ません。
class指定して、text-leftなど色々試しましたが、
画面上の変化はまるで見られませんでした。

<h4>リンク</h4>
<hr style="width:50%"/>
<div style="overflow:hidden">
    <a class="btn" style="float:left;margin-right:5px" href="https://teratail.com/" target="_blank">teratail</a>
</div>

よろしくお願いします。

Answer 1

<hr style="width: 50%; display: inline-block;"/>

Comments

[King_of_Flies]

ありがとうございます。！
できました！

Answer 2

<h4 class="under">リンク</h4>
<div style="overflow:hidden">
    <a class="btn" 
       style="float:left;margin-right:5px" href="https://teratail.com/"        
       target="_blank">teratail</a>
</div>

h4.under {
 width: 50%;
 display: block;
 padding-bottom: 5px;
 padding-left: 10px;
 border-bottom: 1px solid black;
}

こんなかんじじゃあかんの