リストの左側に画像や文字を貼る方法 -「border」と「before」を使う方法-

記事「リストの左側に画像や文字を貼る方法」において、リストをカスタマイズする方法についてまとめ記事を書いておりますが、ここでは、「border」と「before」を使う方法について覚え書きをしたいと思います。

/* リストのマークを差し替える -テーマ「Twenty Twelve」、左ボーダー+▶文字、水色- */
.entry-content ul li {
list-style-type: none;
position: relative;
padding-left:33px;
}

.entry-content ul li:before {
content: "▶";
position: absolute;
display: list-item;
left: 15px;
top: 7px;
color: #42beee;
border-left: 3px solid #42beee;
line-height: 8px;
font-size: 9px;
padding-left: 1px;
}

comemo forum | WordPress.com のデモ用です。-1

/* リストのマークを差し替える -テーマ「Twenty Twelve」、ボーダー囲み+▶文字、水色- */
.entry-content ul li {
list-style-type: none;
position: relative;
padding-left:40px;
}

.entry-content ul li:before {
content: "▶";
position: absolute;
display: list-item;
left: 15px;
top: 3px;
color: #42beee;
border: 1px solid #cccccc;
border-radius: 3px;
line-height: 8px;
font-size: 9px;
padding: 4px;
}

comemo forum | WordPress.com のデモ用です。-2

#2013

テーマ「Twenty Eleven」にお知らせをつけるための CSS

テーマ「Twenty Eleven」にお知らせをつけるための CSS についての覚書です。

agsgsddsf

続きを読む

#2013

テーマ「Oxygen」のウィジェットに枠をつけるためのCSS

oxygenwidget01

rect3015

oxygenwidget02

続きを読む

#2012

テーマ「Ari」のカテゴリーを大カテゴリー毎にボックス分割するためのCSS

aricategory01

rect3015

aricategory02

続きを読む

#2012

WordPress.com のテーマ「Forever」のウィジェットに枠をつけるためのCSS

foreverflame01

rect3015

foreverflame02

続きを読む

#2012, #nodisplay

WordPress.com のテーマ「Ari」のウィジェットに枠をつけるためのCSS

ariwidget01

rect3015

ariwidget02

続きを読む

#2012

WordPress.com のテーマ「Suburbia 」のウィジェットに枠をつけるためのCSS

suburbiawidget01

rect3015

suburbiawidget02

続きを読む

#2012