リストのスタイルを変更したい

前提・実現したいこと

リストの箇条書きに付いてくる点を別のもの（今回だとひし形）にしようとしています。
ネットを見てコピペで追記したのですが、適応されません。
点は消えるのですが、なぜこのようになったのでしょうか。
理由を教えていただけるとありがたいです。

スタイルを変更したいリスト部分はsub-content内のsub-info-listのliです。
(2箇所ありますが、２箇所とも変更したいです）

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>WebCafe - top</title>
7  <link href="css/index.css" rel="stylesheet">
8  <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
9  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
10
11</head>
12<body>
13  <header>
14    <div class="page-header">
15      <h1 class="logo">Dental Clinic</h1>
16      <div class="clinic-info">
17        <p>”地域に根付いた歯科医院”デンタルクリニック</p>
18        <a class="tell">03-0000-0000</a>
19        <p class="open-info">予約受付時間 10:00~19:30 日祝休診</p>
20      </div>
21    </div>
22    <nav>
23      <ul>
24        <li><a class="list-text">トップページ<br>HOME</a></li>
25        <li><a class="list-text">医院紹介<br>CLINIC</a></li>
26        <li><a class="list-text">診療案内<br>SERVICE</a></li>
27        <li><a class="list-text">院長・スタッフ案内<br>STAFF</a></li>
28        <li><a class="list-text">アクセス<br>ACCESS</a></li>
29      </ul>
30    </nav>
31  </header>
32
33  <div class="home-content" id="home">
34    <div class="main-content">
35      <div class="image">
36        image
37      </div>
38      <article>
39        <h2 class="article-title">新着情報</h2>
40
41        <div class="article-item">
42          <p class="date">2012年08月01日</p>
43          <p class="article-content">
44            【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療することにしました。
45          </p>
46        </div>
47
48        <div class="article-item">
49          <p class="date">2012年07月24日</p>
50          <p class="article-content">
51            【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療することにしました。
52          </p>
53        </div>
54
55        <div class="article-item">
56          <p class="date">2012年07月02日</p>
57          <p class="article-content">
58            【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療することにしました。
59          </p>
60        </div>
61
62        <div class="article-item">
63          <p class="date">2012年06月20日</p>
64          <p class="article-content">
65            【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療することにしました。
66          </p>
67        </div>
68
69        <div class="article-item">
70          <p class="date">2012年06月01日</p>
71          <p class="article-content">
72            【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療することにしました。
73          </p>
74        </div>
75      </article>
76    </div>
77
78    <div class="sub-content">
79      <div class="sub-info">
80        <h2 class="sub-info-title">一般歯科</h2>
81        <div class="sub-info-list">
82          <ul>
83            <li>虫歯治療</li>
84            <li>歯周病治療</li>
85            <li>入れ歯</li>
86            <li>予防歯科</li>
87          </ul>
88        </div>
89      </div>
90
91      <div class="sub-info">
92        <h2 class="sub-info-title">審美歯科</h2>
93        <div class="sub-info-list">
94          <ul>
95            <li>ホワイトニング</li>
96            <li>オールセラミック</li>
97            <li>セラミックインレー</li>
98            <li>PMTC</li>
99          </ul>
100        </div>
101      </div>
102    </div>
103
104  </div>
105
106  <div class="page-list">
107    <ul>
108      <li>トップページ</li>
109      <li>医院紹介</li>
110      <li>診療案内</li>
111      <li>院長・スタッフ紹介</li>
112      <li>アクセス</li>
113    </ul>
114  </div>
115
116  <div class="location-info">
117    <div class="info">
118      <p><span>デンタルクリニック</span>
119      東京都新宿区市谷左内町21−13 TEL:03-0000-0000</p>
120    </div>
121  </div>
122
123  <footer>
124    <div class="wrapper">
125      <p><small>&copy;2012 Dental Clinic CO.,LTD All Right Reserved. </small></p>
126    </div>
127  </footer>
128
129</body>
130</html>
131

css
1@charset "UTF-8";
2
3html {
4  font-size: 100%;
5}
6
7body {
8  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
9  line-height: 1.7;
10  color: #432;
11  max-width: 1000px;
12  margin: 0 auto;
13}
14
15a {
16  text-decoration: none;
17}
18
19img {
20  max-width: 100%;
21}
22
23.wrapper {
24  max-width: 1100px;
25  margin: 0 auto;
26  padding: 0 4%;
27}
28
29.page-header {
30  display: flex;
31  justify-content: space-between;
32}
33
34.page-header h1 {
35  font-size: 3rem;
36  font-family: 'メイリオ',
37    'Hiragino Mincho ProN',
38    'ヒラギノ明朝 ProN', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro',
39    sans-serif;
40  font-weight: normal;
41  margin-top: 30px;
42}
43
44.clinic-info {
45  text-align: center;
46  margin-top: 15px;
47}
48
49.clinic-info a {
50  font-size: 30px;
51}
52
53.clinic-info .open-info {
54  border: 1px solid #432;
55  padding: 7px;
56}
57
58nav ul {
59  display: flex;
60  list-style: none;
61  margin: 30px auto;
62  padding: 0;
63  width: 100%;
64  border: 1px solid #432;
65  border-radius: 10px;
66}
67
68nav li {
69  flex: 1 0 auto;
70  min-width: 50px;
71  border-left: 1px solid #432;
72}
73
74nav li a{
75  display: block;
76  width: 100%;
77  padding: 10px 0;
78  text-decoration: none;
79  text-align: center;
80  font-weight: bold;
81}
82
83nav ul li:first-child {
84  border-left: none; /* ナビのliの最初の要素のボーダーを消す */
85}
86
87.home-content{
88  display: flex;
89}
90
91.main-content{
92  width: 70%;
93  order: 2;
94}
95
96.main-content .image{
97  border: 1px solid #432;
98  height: 200px;
99  width: 100%;
100}
101
102.article-title{
103  margin-top: 30px;
104  margin-bottom: 10px;
105  padding-bottom: 10px;
106  border-bottom: 3px solid blueviolet;
107}
108
109.article-item{
110  display: flex;
111  padding: 10px 0;
112  border-bottom: 1px solid skyblue;
113}
114
115.article-item .date{
116  width: 250px;
117  text-align: center;
118}
119
120.sub-content{
121  width: 30%;
122  order: 1;
123}
124
125.sub-info{
126  box-shadow: 1px 1px blue;
127  margin-right: 20px;
128  margin-bottom: 20px;
129  height: 220px;
130}
131
132.sub-info-title{
133  color: white;
134  background-color: lightgreen;
135}
136
137.sub-info ul{
138  padding: 10px;
139}
140
141.sub-info-list ul li{
142  list-style-type: none !important;
143  list-style-image: none !important;
144  padding: 5px;
145  border-bottom: 1px solid skyblue;
146  font-weight: 10px;
147  list-style-position: inside;
148}
149
150.sub-info-title ul li::before{
151  position: absolute;
152  top: 50%;
153  left: 0px;
154  transform: translateY(-50%) rotate(45deg);
155  width: 0.3em;
156  height: 0.3em;
157  background-color: #fff;
158  content: "";
159}
160
161
162.page-list{
163  margin-top: 10px;
164  background-color: skyblue;
165  border-radius: 10px;
166}
167
168.page-list ul{
169  display: flex;
170  list-style: none;
171}
172
173.page-list li {
174  margin: 5px 0 5px 20px;
175  color: white;
176}
177
178
179.location-info{
180  display: flexbox;
181  text-align: right;
182  /* background-color: red; */
183}
184
185.location-info span{
186  font-weight: bolder;
187  margin-right: 10px;
188}
189
190.location-info h3{
191  margin-right: 10px;
192}
193
194footer{
195  text-align: center;
196  margin: 0 auto;
197  padding: 5px 0;
198}
199

試したこと

最初はlists-style:noneで点を消していましたが、それではうまく行かず！importantをlist-style-typeに追記しましたがうまくいきませんでした。

html
1 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">

でliの点を消した際に現れるデフォルトのmarginを消しているので、それが原因かと思いましたが、ネットで見る限りそうでは無いそうです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答3件

質問はこの部分だけですよね

html
1    <div class="sub-content">
2      <div class="sub-info">
3        <h2 class="sub-info-title">一般歯科</h2>
4        <div class="sub-info-list">
5          <ul>
6            <li>虫歯治療</li>
7            <li>歯周病治療</li>
8            <li>入れ歯</li>
9            <li>予防歯科</li>
10          </ul>
11        </div>
12      </div>
13
14      <div class="sub-info">
15        <h2 class="sub-info-title">審美歯科</h2>
16        <div class="sub-info-list">
17          <ul>
18            <li>ホワイトニング</li>
19            <li>オールセラミック</li>
20            <li>セラミックインレー</li>
21            <li>PMTC</li>
22          </ul>
23        </div>
24      </div>
25    </div>

css
1.sub-info ul{
2  padding: 10px;
3}
4
5.sub-info-list ul li{
6  list-style-type: none !important;
7  list-style-image: none !important;
8  padding: 5px;
9  border-bottom: 1px solid skyblue;
10  font-weight: 10px;
11  list-style-position: inside;
12}
13
14.sub-info-title ul li::before{
15  position: absolute;
16  top: 50%;
17  left: 0px;
18  transform: translateY(-50%) rotate(45deg);
19  width: 0.3em;
20  height: 0.3em;
21  background-color: #fff;
22  content: "";
23}

間違いがあまりに多いのですが、、、
簡単に修正すると

.sub-info ul{
  padding: 10px;
  list-style: none;/*追加*/
}

.sub-info-list ul li{
  position: relative;/*追加*/
  padding: 5px 5px 5px 1.1em; /*変更*/
  border-bottom: 1px solid skyblue;

  /* 指定見直し */
  font-weight: 10px;/*weightにpx指定はあり得ません*/

  /* 以下不要 削除 */
  list-style-type: none !important;
  list-style-image: none !important;
  list-style-position: inside;
}

.sub-info-title ul li::before{
  position: absolute;
  top: 0.2em;/*変更*/
  left: 0; 
  transform: translateY(-50%) rotate(45deg);
  width: 0.3em;
  height: 0.3em;
  background-color: #fff;
  content: "";
}

行頭マークを消すのに list-style-type は使いません
list-style: none; で丸ごと消し li の中身をpaddingさせます

.sub-info-title ul li::before ⇒ position: absolute; なのに
.sub-info-list ul li ⇒ 基準となる position: relative; が入っていません。

position は親の高さを継承しませんから
top:50%; では、とんでもない位置になります。

ついでに、
わざわざboxを作るより、他の方が言われているように
content: "◆"; の方が簡単だと思いますが。。。

投稿2020/07/06 06:56

-millmill-

総合スコア674

ベストアンサー

提示されたCSSの

CSS
1.sub-info-list ul li{
2  list-style-type: "◆";
3  (略)
4}

を変えるだけでこちらでは◆が表示されますね。

投稿2020/07/06 05:30

Daregada

総合スコア11990

現状cssの.sub-info-title ul li::before{}は何に使用していますか？
以下だと菱形にはなると思うのですが。

.sub-info-title ul li:before{
content:"\025c6";
display:inline-block;
padding-right:0.5em;
vertical-align:middle;
}

投稿2020/07/06 04:57

Waruo

総合スコア4

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！