comemo 1:48 AM | 2013/05/10
タグ: 2013 ( 639 )

リストの左側に画像や文字を貼る方法 -「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;
}

/* リストのマークを差し替える -テーマ「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;
}

#2013

comemo 12:50 AM | 2013/05/10
タグ: 2013 ( 639 )

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

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

/* リストのマークを差し替える -テーマ「Twenty Twelve」、■、水色- */
.entry-content ul li {
list-style-type: none;
position: relative;
}

.entry-content ul li:before {
content: "";
position: absolute;
list-style-type: square;
display: list-item;
font-size: 37px;
left: 15px;
top: -21px;
color: #42beee;
}

/* リストのマークを差し替える -テーマ「Twenty Twelve」、○、水色- */
.entry-content ul li {
list-style-type: none;
position: relative;
}

.entry-content ul li:before {
content: "";
position: absolute;
list-style-type: circle;
display: list-item;
font-size: 37px;
left: 15px;
top: -21px;
color: #42beee;
}