擬似クラス ulやolのliのリストマークに装飾

新着

カテゴリ一覧
- wordpress
- google
- サーバー
- ドメイン
- sns
- プラグイン
- css
- Illustrator
- photoshop
- bootstrap
- その他

css

擬似クラス ulやolのliのリストマークに装飾

2018/08/28

擬似要素「:before」を使った3つの実用的なli装飾の方法

フォントを使ったテキスト装飾

li:before {
 display: block;
 content: "・";
 width: 1em;
 height: 1em;
 position: absolute;
 left: 0;
 top: 0;
}

li:before {

display: block;

content: "・";

width: 1em;

height: 1em;

position: absolute;

left: 0;

top: 0;

}

backgroundに画像を指定した装飾

li:before {
 display: block;
 content: "";
 width: 12px;
 height: 12px;
 position: absolute;
 left: 0;
 top: 4px;
 background-image: url(../img/head-arrow.png);
 background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100% auto;
}

li:before {

display: block;

content: "";

width: 12px;

height: 12px;

position: absolute;

left: 0;

top: 4px;

background-image: url(../img/head-arrow.png);

background-repeat: no-repeat;

background-position: 50% 50%;

background-size: 100% auto;

}

FontAwesomeを指定した装飾

li:before {
 display: block;
 content: "\f101";
 font-family: "FontAwesome";
 width: 1em;
 height: 1em;
 position: absolute;
 left: 0;
 top: 0;
}

li:before {

display: block;

content: "\f101";

font-family: "FontAwesome";

width: 1em;

height: 1em;

position: absolute;

left: 0;

top: 0;

}

最近よく使う装飾

:before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 20px;
    background-image: url(../img/ico_hand.png);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
}

:before {

content: '';

display: inline-block;

width: 26px;

height: 20px;

background-image: url(../img/ico_hand.png);

background-repeat: no-repeat;

background-size: contain;

vertical-align: middle;

}