before要素を使用し、ボーダーを挿入したい

Question

before要素を使用し、li要素のテキストの前に、ボーダーを挿入したいです。
形としては、PageSpeedInsightの以下のようにしたいです。

自分が記述した該当部分のコードは以下になります。

<div>
  <ul class="score_list">
    <li class="low">0–49</li>
    <li class="middle">50–89</li>
    <li class="high">90–100</li>
  </ul> 
</div>

.low::before{
    content:"";
    width: 10%;
    height:10%;
    background-color: #ff4e42;
    border:solid 1px;
  }
  .score_list{
    display: flex;
    justify-content: space-around;
    width: 48%;
    margin-left: 23%;
    list-style: none;
    margin-top: 2%;
    border: solid 1px gray;
    border-radius: 2rem;
    padding: 1%;
  }

現状の問題点として、ボーダーが縦になってしまい横に広がらなくなってしまっている為、ここの部分を改善したいです。
jsfiddleにて、動作確認可能な状態になっています為、こちらからご確認頂けましたら幸いです。
ご助言の程、よろしくお願いします。

Answer 1

.score_list li::before {
  content: "";
  display: inline-block;
  height: .5rem;
  width: 1.5rem;
  border-radius: 1rem;
  margin-right: 1rem;
  vertical-align: middle;
}

.low::before {
  background-color: #ff4f42;
}

.middle::before {
  background-color: #ffa400;
}

.high::before {
  background-color: #0bce6b;
}

.score_list {
  display: flex;
  justify-content: space-around;
  width: 48%;
  margin-left: 23%;
  list-style: none;
  margin-top: 2%;
  border: solid 1px gray;
  border-radius: 2rem;
  padding: 1%;
}

Comments

[study_111]

ご回答ありがとうございます。
ご提示頂いたスタイルの適用で、解決できました。
シンプルで分かりやすいスタイリングであり、勉強になりました。

Answer 2

サイズやマージンは適当ですので、お好みで微調整してください。

.score_list > li {
  width: 33%;
  display: flex;
  margin: 0 12px;
  justify-content: center;
  align-items: center;
}
.score_list > li::before{
    content:"";
    display: block;
    width: 20%;
    height: 0.5em;
    background-color: #ff4e42;
    border-radius: 0.5em;
    margin-right: 10px;
  }
.score_list > li.low::before {
    background-color: #ff4e42;  
}
.score_list > li.middle::before {
    background-color: #ffa400;;  
}
.score_list > li.high::before {
    background-color: #0cce6b;;  
}

Codepenサンプル

Comments

[study_111]

ご回答ありがとうございます。
jsfiddleにて、該当のスタイルを貼り付けてみたのですが、ボーダーが３列の表示となっていました。
貼って頂きました、codepenとは違った挙動となっていたのは何故でしょう...?

[hatena19]

.score_lis の部分は残しておいて、それ以外を上書きすれば横並びになります。

[study_111]

ご返信ありがとうございます。
そういうことだったのですね。表示されること、確認できました。
こちらのスタイルの適用方法に関しましても、参考にさせて頂きます。

Answer 3

サンプルとしてちょっと弄ったので修正は必要かと思いますが、以下のようにすれば良いかと思います。
キモはdisplay: inline-block;です。
こいつでinline-blockに変えることでWidthの設定が出来たり、Block要素と似たようなことが出来るようにします。
もちろん、inline要素の性格も持ち合わせるので、li要素が押し出されて崩れます。（Fiddle上だと二行になる）
このあたりの調整は別途がんばってもらうとして、一旦横に広げれるようにするところまでを回答とします。

.low::before{
    content:"";
    width: 10%;
    background-color: #ff4e42;
    border:solid 2px #ff4e42;
    display: inline-block;
    vertical-align: middle;
  }

Comments

[study_111]

ご回答ありがとうございます。
borderに対して、widthなどの幅指定をする為に「display: inline-block;」が必要だったという訳なのですね...

[mikan_s4n]

borderに対してというよりは「befor要素に対して」ですね。
before要素はインライン要素に含まれます。
インライン要素は文字ベースでwidthが自動で決められるので基本的にwidthの指定ができないのです。
これに対するブロック要素は<div>などが代表的ですが『箱』的な扱いのため、widthが出来る感じです。
「display: inline-block;」はインライン要素をブロック要素のように取り扱うための指定ですね。
これを指定することでインライン要素でありながらブロック要素のようにふるまわせることが出来るようになります。

[study_111]

ご返信ありがとうございます。
「li」要素について、調べていたのですが、li要素はブロック要素のようなのですが、こちらはもしかして、flexboxを使用しインライン要素になってしまっていた為に、「display:inline-block」と指定する必要があったということでしょうか...?

[mikan_s4n]

flexboxを使用した場合は該当箇所はブロック要素として振舞います。
「display:inline-block」を使用した理由は「Before」をブロック要素として振舞わせるためです。
BeforeはHTMLには直接書かない疑似クラスですが、開発者ツールで生成された実際のコードを見ると以下のような例になります。
<li class="low">::before"0–49"</li>
beforeの実態は「content:"";」のように『文字』であるため、インライン要素なのです。
そのため、Widthの指定が出来るブロック要素としての振る舞いを持たせるために「display:inline-block」を指定したというわけです。

[study_111]

ご返信ありがとうございます。
大変分かりやすく教えて頂き、勉強になりました。