『HTML・CSS』横棒の入れ方を教えて欲しい。

この画像のような横棒を入れる方法を教えて欲しいです。

HTML
1<div class="content">
2        <div class="content_text">
3          <h3>86k</h3>
4          <p>experiences shared</p>
5        </div>
6        <div class="content_line"> </div>
7        <div class="content_text">
8          <h3>156</h3>
9          <p>cities available</p>
10        </div>
11        <div class="content_line"> </div>
12        <div class="content_text">
13          <h3>$66</h3>
14          <p>average price</p>
15        </div>
16        <div class="content_line"> </div>
17        <div class="content_text">
18          <h3>22k</h3>
19          <p>pictures taken</p>
20        </div>
21        <div class="content_line"> </div>
22        <div class="content_text">
23          <h3>975</h3>
24          <p>5 star ratings</p>
25        </div>

CSS
1.content {
2  display: flex;
3  list-style: none;
4  font-size: 2.2rem;
5  justify-content: space-around;
6  margin: 155px 0px 0px;
7  text-align: center;
8}
9
10.content_line {
11	content: "";
12  height: 2px;
13  width: 35px;
14  background: #dbdbdb;
15}
16
17.content_text h3{
18  font-size: 4.8rem;
19  color: #fd5c74;
20}
21
22.content_text p{ 
23  font-size: 2.2rem;
24  margin-top: 10px;
25}

というにしまってどうすれば良いか悩んでいます。

この記載の仕方自体がよくないでしょうか？
最も一般的なやり方や他のやり方もあれば教えて欲しいです、

miyabi_pudding

2020/06/02 07:41

今現在、質問者さんが書いてる、HTMLと、CSSのコードを、質問本文に記載してください。

m.ts10806

2020/06/02 07:42

何が問題でしょうか

a44k

2020/06/02 08:20

教えていただきありがとうございます。自分がうったコード記載しました。

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

回答4件

「意味論的に正しいのはどのようなマークアップか？」という質問だと読みました。
<hr>がよいのでは。

サンプル
（英文字の方は打つのがダルイので省略しました）

html
186k
2<hr>
3156
4<hr>
5$66
6<hr>
722k
8<hr>
9975

css
1body{
2  display: flex;
3  align-content: center;
4}
5
6hr{
7  min-width: 1em;
8  border: none;
9  border-top: 1px solid gray;
10  height: 0;
11}

段落レベルの要素間において、テーマの意味的な区切りを表します。

<hr>: 主題分割 (水平線) 要素 - HTML: HyperText Markup Language | MDN

投稿2020/06/02 07:49

編集2020/06/02 08:00

Lhankor_Mhy

総合スコア36156

ベストアンサー

css
1.content {
2  align-items: center; /* 子要素の縦位置を中央にする */
3  display: flex;
4  list-style: none;
5  font-size: 2.2rem;
6  justify-content: space-around;
7  margin: 155px 0px 0px;
8  text-align: center;
9}

でどうでしょうか。

投稿2020/06/02 08:23

miyabi_pudding

総合スコア9528

a44k

2020/06/02 08:25

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

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

html
1<style>
2.wrap{
3display:flex;
4align-items: center;
5}
6.wrap dl{
7display:block;
8margin:0;
9padding:0 20 0 20;
10}
11.wrap dt{
12display:block;
13margin:auto;
14text-align:center;
15font-size:2em;
16color:red;
17}
18.wrap dd{
19display:block;
20margin:auto;
21text-align:center;
22color:gray;
23}
24.wrap hr{
25margin:0;
26width:20px;
27height:1px;
28display:block;
29border:0px;
30background-Color:gray;
31}
32</style>
33<div class="wrap">
34<dl>
35<dt>86k</dt>
36<dd>experiences shared</dd>
37</dl>
38<hr>
39<dl>
40<dt>156</dt>
41<dd>cities available</dd>
42</dl>
43<hr>
44<dl>
45<dt>$66</dt>
46<dd>average price</dd>
47</dl>
48<hr>
49<dl>
50<dt>22k</dt>
51<dd>pictures taken</dd>
52</dl>
53<hr>
54<dl>
55<dt>975</dt>
56<dd>5 star ratings</dd>
57</dl>
58</div>

投稿2020/06/02 08:12

yambejp

総合スコア115010

いろいろな方法がありますので，いくつか上げます。
上から順に汎用性が高いと思います

<div>タグにcssで着色・変形させる方法

html
1<div class="border-gray" />

css
1.border-gray {
2  width: 10px;
3  height: 1px;
4  background-color: #B9BFC5;
5}

画像やsvgを用いる方法

html
1<img src="横棒.png" />

文字「-」の大きさや色をcssで変える方法

html
1<span class="border-gray">-</span>

css
1.border-gray {
2  color: #B9BFC5;
3  font-size: 16px;
4}

投稿2020/06/02 07:52

u-sho

総合スコア110

u-sho

2020/06/02 07:53

他の方のコメントの方が素晴らしいですね

Take_it

2020/06/13 02:32 編集

そう思うのは勝手だけど、無償で、善意で複数の方法を丁寧に回答してくれた人に対して、あまりに失礼かつ無神経なコメント返しですね。回答者に対してそんな上から目線のコメントができるくらいの上級者なら質問なんてせず自力でやればいいんじゃないでしょうか？ってここまで書いてコメ主が回答者本人だと気づいたマヌケ。。

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

あなたの回答