spanにテキストなしで色を付ける方法

spanタグでbackground-color付きの円を表示したいのですが上手くいきません。
chromeで確認してもエラーは無いので書き方が違うのかもしれません。
spanタグ内にテキストが入っていると色が出るのですが、テキストを消すと色も一緒に消えてします。
span内にテキストなしでbackground-colorを表示することはできないでしょうか？

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NIKE SHOES</title>
	<style>
span {
 width: 20px;
  height: 20px;
  background: #ff0;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}
	</style>
</head>
<body>
<h3>COLOR :
          <span></span>
          <span></span>
          <span></span>
</h3>
</body>
</html>

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

回答2件

ベストアンサー

spanはインライン要素なので、幅とか高さとかを指定することができません。
インラインブロック要素に変換しましょう。

        <style>
            span {
                width: 20px;
                height: 20px;
                background: #ff0;
                border-radius: 50%;
                margin: 0 5px;
                cursor: pointer;
                display: inline-block;
            }
        </style>

インライン要素とブロック要素って何が違うの？って感じならこちらを参考に。
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

投稿2020/04/24 12:36

編集2020/04/24 12:37

Yorrie

総合スコア354

yokotary

2020/04/24 12:44

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

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

display: inline-block;を追加する必要があるかと思われます。

span {
 width: 20px;
  height: 20px;
  background: #ff0;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  display: inline-block; /* こちらを追加 */
}

投稿2020/04/24 12:33