ミギムキ

[CSS] ひし形マークのリストを設置したい

公開日:2018/10/11

やりたいこと

ulタグのリスト項目の頭につく記号は、list-styleで切り替えが可能です
が、少し趣向を変えてマークを自前でスタイルしてみると、ただのリストもちょっと見栄えがよくなります
今回は◆マークが頭につくリストを実装してみました。ひし形のサイズを文字サイズよりもちょっと小さくすると、どことなく上品な感じが出ていいと思います

サンプルコード

.list_dia > li {
    position: relative;
    padding: 0px 0px 0px 1em;
    list-style: none;
}
.list_dia > li::before {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%) rotate(45deg);
    width: 0.3em;
    height: 0.3em;
    background-color: #fff;
    content: "";
}

仕組み、解説、補足など

before擬似要素で小さな四角を作り、「transform: rotate(45deg);」で回転させることでひし形にしています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。