CSSで赤い丸を作ってみる

イメージ

こんな感じで、丸の中に数字を入れる！

コード

HTML

html

<p class="maru">{数字}</p>

今回はpタグで作ったけど別になんでもいい。

style

css

.maru{
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 22px;
    background-color: #e82a2a;
    color: #fff;
    text-align: center;
    line-height: 22px;
    margin-bottom: 6px;
}

サイズとか色は後で好きに変える感じ！（・ω・）/

色々色変更があるバッヂのように使うのであれば下記のように
ベースと背景色を分けてもいいかも

css

.base{
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 22px;
    color: #fff;
    text-align: center;
    line-height: 22px;
    margin-bottom: 6px;
}
.red{
    background-color: #e82a2a;
}