css　中央配置と下線が同時にできません

要素を中央に持ってきて、文字の下にだけ下線を引きたかったのですが、ブロック要素であるために、１個目のコードを打つと中央には持って来れても横幅いっぱいに下線が引かれてしまいました。
次に二個目のコードのようにinline-blockとしたのですが、text-alignを使ってもmargin0を使っても中央に移動しませんでした。どうすればいいでしょうか？

css
1コード
2.main-contents h3{
3    text-align: center;
4    border-bottom: 3px solid black ;
5  }

css
1コード
2.main-contents h3{
3  margin: 0 auto;
4  border-bottom: 3px solid black ;
5  display: inline-block;
6}

html
1コード
2<div class="main">
3    <div class="main-contents">
4      <div class="main-photo">
5    <img src="https://code-step.com/demo/html/profile/img/mainvisual.jpg" alt="bike-image" class="main-image">
6      </div>
7    <h3 id="index">About</h3>
8    <div class="main-icon">
9    <img src="https://code-step.com/demo/html/profile/img/about.jpg" alt="icon-image">
10    <h4>KAKERU MIYAICHI</h4><br><p>テキストmain</p>
11    </div>
12

yambejp

2021/08/17 05:01

HTMLを例示ください

行動規範の内容に同意します

回答1件

ベストアンサー

文字の下だけに線を引きたいのでしょうか？

css
1<style>
2.main-contents h3{
3  text-align: center;
4  text-decoration:underline;
5  text-decoration-thickness: 3px;
6}
7</style>
8<div class="main-contents">
9<h3>test test</h3>
10</div>