先頭に星アイコン付きのリスト HTML/CSS サンプル

先頭に星アイコン付きのリスト HTML/CSS サンプル

CODE

.list {
  border: 4px solid #57c7b3;
  background: #fff;
  padding: 2rem;
}

.list li {
  position: relative;
  padding-left: 1.6rem;
  margin-top: 2rem;
  line-height: 1.8rem;
}

.list li:first-child {
  margin-top: 0;
}

.list li:before {
  content: "★";
  position: absolute;
  color: #e0c60b;
  font-size: 1.4rem;
  left: 0;
}
<ul class="list">
  <li>テキストがはいります。テキストがはいります。</li>
  <li>テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。</li>
  <li>テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。</li>
</ul>

DEMO

See the Pen list-sample-001 by CODE IDEA (@codeidea) on CodePen.

※ブラウザにデフォルトで付いているスタイルを消すため、リセットCSS「destyle.css」を使っています。

※CSSの指定方法は一例であり、同じ見た目を違う書き方で表現することもできます。絶対正しいというものではありません。

MEMO

「★」の星マークにしていますが、「■」でも「●」でも、書き換えれば使えます。

注意点は、↓li に指定した「position: relative;」と

.list li {
  position: relative;
  padding-left: 1.6rem;
  margin-top: 2rem;
  line-height: 1.8rem;
}

↓li:before に指定した「position: absolute;」を必ず入れることです。

.list li:before {
  content: "★";
  position: absolute;
  color: #e0c60b;
  font-size: 1.4rem;
  left: 0;
}

これらの記述がないと、星マークがどこかへ飛んでいきます。

全体の li に「margin-top: 2rem;」を指定し、最初のliだけ「margin-top: 0;」で上部マージンを消すと、見た目がガタつかず、きれいになります。

クラス名、各数値、文言は用途に合わせて変えてください。

MANUAL

border境界線の指定
background背景色の指定
paddingボックス内の隙間の指定
position配置の指定
padding-left内側の間隔(左方向)の指定
margin-topマージン上部の指定
line-height行間の指定
content:after :before を使う際に必須
color文字色の指定
font-size文字サイズの指定
left左方向 位置の指定

リストカテゴリの最新記事