『Dental-Clinic』模写コーディングについて (1) 「一般歯科」の部分が出来ない。

忙しい中ありがとうございます。

現在使用　アプリケーション・機種情報

Mac OS Catalina(今の時代は違います)・ Google Chome・Visual Studio Code

前提・実現したいこと

Dental Clinicの模写コーディングをしていまして、現在メインの「一般歯科の文字の下に青い(?)線を引く部分」を作っていまして現在は

になっていまして見本は

文字の下に　青い線が表示をされていますがどういうCSSのコードを打てばよろしいのでしょうか？
もし分かる人がいれば教えてもらえないでしょうか？よろしくお願いします。

ソースコード

html
1          <div class="contentsWrapper"><!--[ メイン部分 ]-->
2            <div class="main">
3              <div class="main-1">
4                <div class="main-1-Title">
5                  <h1 class="main-1-Title-h1"><span class="main-1-Title-h1-mazi">一般歯科</span></h1>
6                  <ul class="main-1-main-ul">
7                    <li><a href="#"><span class="main-1-li-mozi1">虫歯治療</span></a></li>
8                    <li class="main-1-main-li-1"><a href="#"><span class="main-1-li-mozi2">歯周病治療</span></a></li>
9                    <li class="main-1-main-li-2"><a href="#"><span class="main-1-li-mozi3">入れ歯</span></a></li>
10                    <li class="main-1-main-li-3"><a href="#"><span class="main-1-li-mozi4">予防歯科</span></a></li>
11                  </ul>
12                </div>
13              </div>
14              <div class="main-2">
15                <
16              </div>
17              <div class="main-right">
18                <
19              </div>
20            </div>
21          </div>
22

css
1.contentsWrapper {
2    width: 920px;
3    height: 700px;
4    margin-top: 8px;
5    margin: 0 auto;
6   /* background-color: pink; */
7}
8
9.main {
10    width: 280px;
11    height: 700px;
12    margin: right;
13   /* background-color: rgb(143, 192, 194); */
14    margin-top: 20px;
15    margin-bottom: 20px;
16}
17
18.main-1 {
19    position: absolute;
20    top: 228px;
21    width: 260px;
22    height: 232px;
23    margin: right;
24   /* background-color:rgb(224, 161, 77); */
25}
26
27.main-right {
28    position: absolute;
29    width: 640px;
30    height: 700px;
31    margin-top: -16px;
32    margin-left: 280px;
33   /* background-color: rgb(107, 161, 110); */
34}
35
36.main-1-Title {
37    height: 232px;
38    border: 1px solid #6CC6C4;
39    display: inline-block;
40    border-radius: 6px 6px 0px 0px;
41}
42
43.main-1-Title-h1 {
44    color: #fff;
45    background: linear-gradient( #99E1DF,#71C9C7 );
46    width: 258px;
47    height: 41.5px;
48    border-radius: 6px 6px 0px 0px;
49}
50
51.main-1-Title-h1-mazi {
52    position: absolute;
53    left: 15.5px;
54    top: 12.5px;  
55}
56
57.main-1-main-ul li a {
58    font-size: 14.04px;
59    text-align: 50px;
60    width: 262px;
61    height: 64px;
62    line-height: 30px;
63}
64
65.main-1-main-ul li a:hover {
66    color: #6CC6C4;
67}
68
69.main-1-li-mozi1 {
70    
71}
72
73.main-1-main-li-1 {
74
75}

になっています。

補足情報

もし問題点がありましたら、お手数をお掛けをしますが[ 質問への追記・修正依頼 ]をよろしくお願いします。
忙しい中ありがとうございました。

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

回答2件

ベストアンサー

下だけ境界線を表示すればいいので、border-bottom を使えばいいでしょう。

css
1.main-1-main-ul {
2  padding-left: 0;
3}
4.main-1-main-ul li {
5    margin: 0px 12px;
6    padding: 0 0 0 25px;
7    list-style: none;
8    border-bottom: #6CC6C4 solid 1px;
9}

投稿2021/01/31 11:00

hatena19

総合スコア34073

Rwight

2021/02/07 00:12

〜返信が遅くなってしまい申し訳ありません〜 [ hatena 19 ]さんご回答ありがとうございます。この上のソースコードを貼ってみたところ出来ました。本当にご回答をしてくださいましてありがとうございました。

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

Looking for a trusted dental clinic in South Pasadena? south pasadena dental Clinic offers comprehensive oral care with a patient-centered approach. Our experienced team provides a wide range of dental services, from routine check-ups to advanced treatments, ensuring optimal oral health for our patients. Experience excellence in dental care at South Pasadena Dental Clinic.

投稿2023/06/20 14:11