Web Design Leaves

<p class="check">Sample Text</p>

p.check {
  font-size: 20px;
}

.check::before {
  content: 'check!';
  display: inline-block;  /* 必要に応じて */
  padding: .5rem;
  margin-right: .5rem;  /* コンテンツとの距離 */
  background-color: #5988BF;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;   /* サイズを指定 */
  vertical-align: bottom;   /* 垂直方向の位置の調整 */
}

.check-after {
  font-size: 20px;
}
.check-after::after {
  content: 'check!';
  display: inline-block;
  padding: .5rem;
  margin-left: .5rem;  /* コンテンツとの距離（左側をあける） */
  background-color: #5988BF;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  vertical-align: bottom;
}

<p class="check2">Sample Text</p>

p.check2 {
  font-size: 18px;
  white-space: pre;  /* 対象の要素に white-space:pre を指定 */
}

.check2::before {
  content: 'check!\A必見';  /* 改行したい位置で \A を記述*/
  display: inline-block;
  text-align: center;
  padding: .5rem;
  margin-right: .5rem;
  background-color: #5988BF;
  color: #fff;
  font-size: 12px;
  vertical-align: middle;
}

<p class="check3">Sample Text</p>

p.check3 {
  font-size: 18px;
  white-space:pre;  /* 対象の要素に white-space:pre を指定 */
}

.check3::before {
  content: 'check!\A';  /* 改行したい位置で \A を記述 */
  text-align: center;
  padding: .5rem;
  background-color: #5988BF;
  color: #fff;
  font-size: 12px;
  vertical-align: top;
}

.check3::after {
  content: '必見';
  display: block;  /* block を指定 */
  margin-top: 5px;
  width: 3rem;  /* 幅を指定 */
  text-align: center;
  padding: .25rem .5rem;
  background-color: #bf5959;
  color: #fff;
  font-size: 12px;
}

<div class="notice">
  <h3>お知らせ</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit....</p>
</div>

.notice {
  border: 1px solid #dfb5b5;
  padding: 20px;
  margin: 50px 0;
  position: relative;   /* 絶対配置の基準とする */
  width: 50%;
}

.notice::before {
  content: 'Notice';
  position:absolute;  /* 絶対配置 */
  top: -10px;  /* 垂直方向の位置の調整 */
  left: 50%;  /* 水平方向中央揃え */
  margin-right: -50%;  /* 水平方向中央揃え */
  transform: translateX(-50%) ;  /* 水平方向中央揃え */
  background-color: #fff;
  padding: 0 20px;
  color: #a45252;
  font-size: 16px;  /* テキストのサイズ */
}

.notice h3 {
  font-size: 16px;
  text-align: center;
}

<p class="dq_unicode">Sample Text</p>

.dq_unicode {
  font-size: 22px;
  color: #a78b03;
}
.dq_unicode::before {
  content:'\275D';  /* Unicode 値をバックスラッシュでエスケープ */
  color:#73b48f;
  margin-right: .5rem;
  font-size: 36px;
}
.dq_unicode::after {
  content:'\275E';  /* Unicode 値バックスラッシュでエスケープ */
  color:#73b48f;
  margin-left: .5rem;
  font-size: 36px;
}

<blockquote>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
</blockquote>

blockquote {
  position: relative;  /* 疑似要素の配置の基準となるように relative を指定 */
  background: #dce2f6;
  padding: 2rem ;
  display: inline-block;
  border-radius: 6px;
  max-width: 520px;
}

blockquote::before {
  position: absolute;   /* 絶対配置 */
  content: '\275D';
  top: 0px;     /* 位置を調整 */
  left: 10px;   /* 位置を調整 */
  color: #97a4c7;
  font-size: 1.8em;  /* サイズを調整 */
}
blockquote::after {
  position: absolute;   /* 絶対配置 */
  content: '\275E';
  bottom:0px;     /* 位置を調整 */
  right: 10px;    /* 位置を調整 */
  color: #97a4c7;
  font-size: 1.8em;  /* サイズを調整 */
}

<p class="js-logo">JavaScript Unofficial Logo</p>

.js-logo::before {
  content: url(../images/logo.png);  /* url() 関数を使って画像のパスを指定 */
  margin-right: 20px;  /* 画像の右側のスペース */
}

.js-logo::after {
  content: url(../images/logo.png);
  margin-left: 20px;  /* 画像の左側のスペース */
}

url("data:image/svg+xml, URI エンコードした svg 要素のマークアップ")

<p class="wp">sample text</p>

.wp {
  font-size: 22px;
  color: #aa8800;
}
.wp::before {
  position: relative; /* 位置 right を指定するために設定 */
  right:10px; /* 位置（テキストとの距離）を調整 */
  display: inline-block;  /* 横並び（インライン） */
  vertical-align: -5px;  /* 垂直方向の調整 */
  margin-left: 1rem;  /* 左端の位置の調整 */
  /* content の値に url() を使ってデータ URL スキームで svg のデータを埋め込んで表示 */
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%230073aa' viewBox='0 0 16 16'%3E  %3Cpath d='M12.633 7.653c0-.848-.305-1.435-.566-1.892l-.08-.13c-.317-.51-.594-.958-.594-1.48 0-.63.478-1.218 1.152-1.218.02 0 .039.002.058.003l.031.003A6.838 6.838 0 0 0 8 1.137 6.855 6.855 0 0 0 2.266 4.23c.16.005.313.009.442.009.717 0 1.828-.087 1.828-.087.37-.022.414.521.044.565 0 0-.371.044-.785.065l2.5 7.434 1.5-4.506-1.07-2.929c-.369-.022-.719-.065-.719-.065-.37-.022-.326-.588.043-.566 0 0 1.134.087 1.808.087.718 0 1.83-.087 1.83-.087.37-.022.413.522.043.566 0 0-.372.043-.785.065l2.48 7.377.684-2.287.054-.173c.27-.86.469-1.495.469-2.046zM1.137 8a6.864 6.864 0 0 0 3.868 6.176L1.73 5.206A6.837 6.837 0 0 0 1.137 8z'/%3E  %3Cpath d='M6.061 14.583 8.121 8.6l2.109 5.78c.014.033.03.064.049.094a6.854 6.854 0 0 1-4.218.109zm7.96-9.876c.03.219.047.453.047.706 0 .696-.13 1.479-.522 2.458l-2.096 6.06a6.86 6.86 0 0 0 2.572-9.224z'/%3E  %3Cpath fill-rule='evenodd' d='M0 8c0-4.411 3.589-8 8-8 4.41 0 8 3.589 8 8s-3.59 8-8 8c-4.411 0-8-3.589-8-8zm.367 0c0 4.209 3.424 7.633 7.633 7.633 4.208 0 7.632-3.424 7.632-7.633C15.632 3.79 12.208.367 8 .367 3.79.367.367 3.79.367 8z'/%3E%3C/svg%3E");
}

.icon-facebook::before {
  content: ""; /* 値を空に */
  display: inline-block;
  height: 30px;  /* 表示する高さ */
  width: 30px; /* 表示する幅 */
  background-repeat: no-repeat; /* 繰り返しなし */
  background-size: contain; /* 疑似要素の領域に svg 全体が収まるよう拡大・縮小 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%233854EE' class='bi bi-facebook' viewBox='0 0 16 16'%3E  %3Cpath d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z'/%3E%3C/svg%3E");
  transition: transform 0.3s ease-in; /* transition アニメーション */
}

/* ホバー時の transition アニメーション */
.icon-facebook:hover::before {
  transform: rotate(360deg);
}

<a href="#"><i class="icon-facebook"></i></a>

/* 正方形を表示 */
.square::before {
  content: ''; /* 空文字列を指定 */
  display: inline-block; /* width と height を設定するために inline から変更 */
  width: 10px;
  height: 10px;
  background-color: red;
  margin-right: 5px;
}

/* 線（実際は長方形）を表示 */
.square::after {
  content: ''; /* 空文字列を指定 */
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: red;
  margin-left: 5px;
  vertical-align: middle;
}

<p class="square">square</p>

/* 疑似要素を適用する要素 */
.circles {
  position: relative; /* 絶対配置の基準とする */
  display: inline-block; /* コンテンツの量により伸縮 */
  padding: 0 24px; /* 疑似要素を配置するスペース */
}

.circles::before {
  content: ''; /* 空文字列を指定 */
  position: absolute; /* 絶対配置 */
  width: 16px;
  height: 16px;
  left: 0; /* 左端から配置 */
  top: 0;
  bottom:0;
  margin: auto 0;
  background-color: red; /* 背景色を指定 */
  border-radius: 50%; /* 角丸 50% で円形に */
}

.circles::after {
  content: ''; /* 空文字列を指定 */
  position: absolute; /* 絶対配置 */
  width: 16px;
  height: 16px;
  right: 0; /* 右端から配置 */
  top: 0;
  bottom:0;
  margin: auto 0;
  border: 2px solid red;
  box-sizing: border-box; /* 枠線を指定 */
  border-radius: 50%;
}

<p class="circles">circles</p>

.lines {
  position: relative;
  display: inline-block;
  padding-left: 30px;   /* 疑似要素のスペース */
}
.lines::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20px;
  height: 8px;
  left: 0;
  border-top: 2px solid #f356cf;
  border-bottom: 2px solid #3d68f4;
}

.lines::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 8px;
  height: 20px;
  left: 5px;
  border-left: 2px solid #29ac41;
  border-right: 2px solid #b89825;
  transform: skewX(-20deg);   /* 傾斜 */
}

<p class="lines">border で線を描画</p>

.button > i {
  position: relative;
  vertical-align: middle;
  top: -3px;  /* i 要素の位置の調整 */
}

/* ボタン */
.plus-btn {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid #999;
  margin-right: .5rem;
}

/* 疑似要素で ＋ を作成 */
.plus-btn::before,
.plus-btn::after {
  content: '';
  position: absolute;
  top: calc(50% - 2px);
  left: 8px;
  right: 8px;
  border-top: 4px solid #666;
}

.plus-btn::after {
  transform: rotate(90deg);
}

<p class="button"><i class="plus-btn"></i>Plus Button</p>

<div class="overlay">
  <img src="images/sample.jpg" width="600" height="398" alt="beach">
</div>

.overlay {
  position:relative;  /* 絶対配置の基準 */
  width: 70%;
  max-width: 320px;
}
.overlay img {
  max-width: 100%;
  height: auto;
  display: block;
}
.overlay::before {
  content: '';
  position: absolute;  /* 絶対配置 */
  top: 15px;  /* 上端からの位置 */
  left: 15px;  /* 左端からの位置 */
  right: 15px;  /* 右端からの位置 */
  bottom: 15px;  /* 下端からの位置 */
  background-color: rgba(161, 9, 9, 0.25);
}

.overlay::after {
  content: '';
  position: absolute;  /* 絶対配置の基準 */
  top: 35px;
  left: 35px;
  right: 35px;
  bottom: 35px;
  background-color: rgba(128, 161, 9, 0.25);
}

.overlay {
  position:relative;  /* 絶対配置の基準 */
  width: 70%;
  max-width: 320px;
}
.overlay img {
  max-width: 100%;
  height: auto;
  display: block;
}
.overlay::before {
  content: '';
  position: absolute;  /* 絶対配置 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(315deg, transparent 75%, #d45d55 0) -10px 0,
    linear-gradient(45deg, transparent 75%, #d45d55 0) -10px 0,
    linear-gradient(135deg, #a7332b 50%, transparent 0) 0 0,
    linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0 #561a16;
  background-size: 20px 20px;
  opacity: .2  /* パターン全体を半透明に */
}

<div class="overlay-anim sample">
  <img src="images/sample.jpg" width="600" height="398" alt="">
  <div class="caption">
    <h3>Beach</h3>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
  </div>
</div>

.overlay {
  position:relative;  /* 絶対配置の基準 */
  width: 70%;
  max-width: 320px;
}
.overlay img {
  width: 100%;
}
.overlay::before {
  content: '';
  position: absolute;  /* 絶対配置 */
  top: 0;
  left: 0;
  width: 100%;  /* または right: 0;  */
  height: 100%;  /* または bottom: 0;  */
  background-color: rgba(0, 0, 0, 0.35);
  transition: background-color 1s;  /* トランジション */
}

/* ホバー時のオーバーレイ */
.overlay:hover::before {
  background-color: rgba(0, 0, 0, 0.1);
}

.overlay .caption {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}

<ul style="list-style-type:circle; font-size: 20px;">
  <li>list item</li>
</ul>

li.info::before {
  content: 'i';
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: .5rem;
  text-align: center;
  vertical-align: middle;
  background-color: #0a40e3;
  color: #fff;
  border-radius: 50%;
  line-height: 20px; /* i の文字の垂直方向の位置調整（必要に応じて変更）  */
  font-weight: bold;
  position: relative; /* 必要に応じて relative を指定して bottom などで位置の調整 */
  bottom: 2px;
}

<ul>
  <li class="info">sample</li>
</ul>

li.info {
  list-style-type: none;
}

li.info {
  position: relative; /* 絶対配置の基準 */
  padding-left: .5rem;
  list-style-type: none;  /* この場合は指定しなくても擬似要素の下になって見えない */
}

li.info::before {
  content: 'i';
  position: absolute; /* 絶対配置 */
  left: -1.5rem; /* 位置の調整 */
  top: 0;
  bottom: 0;
  margin: auto  0 ;
  width: 20px;
  height: 20px;
  padding: 2px;
  text-align: center;
  background-color: #0a40e3;
  color: #fff;
  border-radius: 50%;
  line-height: 16px; /* 必要に応じて変更（要素の文字サイズなどによる）  */
  font-weight: bold;
}

ul.star {
  list-style-type: none; /* デフォルトのマーカーを非表示に */
  padding-left: 0;
}

ul.star li::before {
  content:'\2606';  /* 星マークのユニコード */
  margin-right: .5rem;
}

ul.star li:nth-child(5n)::before {
  color: blue;
}
ul.star li:nth-child(5n+1)::before {
  color: red;
}
ul.star li:nth-child(5n+2)::before {
  color: green;
}
ul.star li:nth-child(5n+3)::before {
  color: orange;
}
ul.star li:nth-child(5n+4)::before {
  color: hotpink
}

<ul class="star">
  <li>sample</li>
  ・・・中略・・・
  <li>sample</li>
</ul>

<div class="skew-hr-bg">
  <div class="content">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit...</p>
    <p>Voluptates deserunt repellat dicta ducimus eum expedita...</p>
  </div>
</div>

.skew-hr-bg {
  position: relative; /* 疑似要素の基準 */
  z-index: 0; /* auto 以外を設定 */
  overflow: hidden;   /* 左方向に移動してはみ出す部分を非表示 */
  background-color: #8296b1;
  min-height: 200px;
  padding: 50px 20px;
  color: #efefef;
}

.skew-hr-bg::before {
  content: ''; /* 空 */
  position: absolute;  /* 絶対配置 */
  top: 0;     /* 0に設定 */
  bottom: 0;   /* 0に設定 */
  left: 0;     /* 0に設定 */
  right: 0;    /* 0に設定 */
  background-color: #05234a;
  transform: skewX(-30deg) translateX(-50%); /* translateX() で左方向に移動 */
  z-index: -1;   /* コンテンツが隠れないように */
}

.skew-hr-bg2{
  background: linear-gradient(
    -60deg,  /* 角度 */
    #8296b1 0%,  /* 開始色 */
    #8296b1 50%,  /* 終了色 */
    #05234a 50%,  /* 開始色 */
    #05234a 100%  /* 終了色 */
  );
  min-height: 200px;
  padding: 50px 20px;
  color: #efefef;
}

<div class="box"></div>

.box {
  border-top: 30px solid #fbf579;
  border-right: 30px solid #005995;
  border-bottom: 30px solid #fa625f;
  border-left: 30px solid #600473;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  display: inline-block; /* インライン要素に適用する場合は指定 */
}

.box {
  border-top: 50px solid #fbf579;  /* border-width の値を 50px に変更しています */
  border-right: 50px solid #005995;
  border-bottom: 50px solid #fa625f;
  border-left: 50px solid #600473;
  width: 0;
  height: 0;
}

<div class="triangle"></div>

.triangle {
  border-top: 50px solid transparent;; /* border-top の色を透明に */
  border-right: 50px solid transparent; /* border-right の色を透明に */
  border-left: 50px solid transparent; /* border-left の色を透明に */
  border-bottom: 50px solid #fa625f;
  width: 0;
  height: 0;
  background-color: #ddd; /* わかりやすいように背景色を指定 */
}

.triangle {
  border: 50px solid transparent; /* すべての border の色を透明に */
  border-bottom: 50px solid #fa625f; /* border-bottom の色を指定 */
  width: 0;
  height: 0;
  background-color: #ddd; /* わかりやすいように背景色を指定 */
}

.triangle {
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid #fa625f;
  width: 0;
  height: 0;
  background-color: #ddd; /* わかりやすいように背景色を指定 */
}

.triangle1-3 {
  margin: 40px 0;
  border-bottom: 50px solid #fa625f;
  border-left: 50px solid transparent;
  display: inline-block;
  background-color: #ddd; /* わかりやすいように背景色を指定 */
}

.triangle {
  border: 50px solid transparent;
  border-top: 50px solid #005995;    /* 同じ色を指定 */
  border-right: 50px solid #005995;  /* 同じ色を指定 */
  width: 0;
  height: 0;
}

.triangle {
  border: 50px solid #005995; /* すべての border の色を青に */
  border-bottom: 50px solid transparent; /* border-bottom の色を透明に */
  width: 0;
  height: 0;
}

.triangle {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86.6px solid #fa625f;
  width: 0;
  height: 0;
}

.triangle {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: calc(50px * 1.732) solid #fa625f;  /* calc() を使って算出 */
  width: 0;
  height: 0;
}

.triangle {
  border-left: calc(50px * 1.732) solid #600473;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  width: 0;
  height: 0;
}

.arrow {
  width: 100px;   /* 辺の長さ */
  height: 100px;  /* 辺の長さ */
  border-top: 20px solid #005995;  /* 線の太さと種類と色 */
  border-right: 20px solid #005995;  /* 線の太さと種類と色 */
  display: inline-block;
}

.arrow {
  width: 100px;
  height: 100px;
  border-top: 20px solid #005995;
  border-right: 20px solid #005995;
  display: inline-block;
  transform: rotate(45deg);  /* 右45度回転 */
}

.check-mark {
  width: 100px;
  height: 70px;  /* 短く指定 */
  border-top: 12px solid #005995;  /* 細く指定 */
  border-right: 20px solid #005995;
  display: inline-block;
  transform: rotate(135deg); /* 右135度回転 */
}

<p class="balloon1">Sample Text</p>

/* ボックス */
.balloon1 {
  position: relative;  /* 三角形の配置の基準 */
  background: #ccc;
  display: inline-block;  /* コンテンツに応じて伸縮 */
  padding: 2rem;
  text-align: center;  /* テキストの中央揃え（必要に応じて） */
  max-width: 600px;  /* 必要に応じて */
  min-width: 200px;  /* 必要に応じて */
}

/* 三角形 */
.balloon1::before {
  content: "";  /* content は空を指定 */
  position: absolute;  /* 絶対配置 */
  bottom: -16px; /* 三角形の高さだけボックスの下に配置 */
  right: 0;
  left: 0;
  margin: 0 auto; /* right:0 と left:0 と合わせて水平方向中央配置 */
  border-style: solid;
  border-width: 16px 16px 0 16px;
  border-color: #ccc transparent transparent transparent;
  width: 0;
  height: 0;
}

border-top: 16px solid #ccc;
border-right: 16px solid transparent;
border-left: 16px solid transparent;

<p class="balloon2">Sample Text</p>

/* ボックス */
.balloon2 {
  position: relative;
  background: #fa625f;
  display: inline-block;
  padding: 2rem;
  text-align: center;
  max-width: 600px;
  min-width: 200px;
  color: #fff;
}

/* 三角形 */
.balloon2::before {
  content: "";
  position: absolute;
  bottom: -16px;
  right: 0;
  left: 0;
  margin: 0 auto;
  border-style: solid;
  border-width: 16px 0 0 16px; /* border-right の部分の幅を 0 に */
  border-color: #fa625f transparent transparent transparent;
  width: 0;
  height: 0;
}

<p class="balloon3">Sample Text</p>

/* ボックス */
.balloon3 {
  position: relative;
  background: #005995;
  display: inline-block;
  padding: 2rem;
  text-align: center;
  max-width: 600px;
  min-width: 200px;
  color: #fff;
  margin-left: 14px; /* 左側の三角形のスペース（必要に応じて） */
  border-radius: 6px;
}

/* 三角形 */
.balloon3::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px; /* 三角形の高さだけボックスの左に配置 */
  margin: auto 0; /* top:0 と bottom:0 と合わせて垂直方向中央配置 */
  border-style: solid;
  border-width: 14px 14px 0 0;
  border-color:  transparent #005995 transparent transparent;
  width: 0;
  height: 0;
}

<p class="balloon4">Sample Text</p>

/* ボックス */
.balloon4 {
  position: relative;
  border: 2px solid #7aac81; /* 枠線 */
  background-color: #e7f7e9; /* 背景色 */
  display: inline-block;
  padding: 2rem;
  text-align: center;
  max-width: 600px;
  min-width: 200px;
  color: #333;
  border-radius: 6px;
}

/* 後ろに配置する三角形（色はボックスの枠線の色） */
.balloon4::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -24px;
  margin: auto 0;
  border-style: solid;
  border-width: 0 0 24px 24px;
  border-color: transparent transparent transparent #7aac81;
  width: 0;
  height: 0;
}

/* 手前に配置する三角形（色はボックスの背景色の色） */
.balloon4::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -19px;
  margin: auto 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent transparent #e7f7e9;
  width: 0;
  height: 0;
}

ol.pink-star {
  list-style-type: none; /* デフォルトのマーカー（番号）を非表示に */
  padding-inline-start: .5rem;  /* 必要に応じて */
}

ol.pink-star li::before {
  content: counter(list-item) ' \2606 '; /* カウンター名に list-item を指定 */
  color: hotpink;
  margin-right: .5rem;
}

<ol class="pink-star">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ol>

ol.color-number li::marker {
  color: limegreen; /* 数字の色 */
  font-size: 20px;  /* 大きさ */
}

<ol class="color-number">
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
  </ol>
  

ol.count-down10 {
  counter-reset: list-item 11;  /* 初期値を11に */
  list-style-type: none;
  padding-inline-start: .5rem;  /* 必要に応じて */
}

ol.count-down10 li {
  counter-increment: list-item -1;  /* 増減する値に -1  */
}

ol.count-down10 li::before {
  content: counter(list-item);  /* カウンター名に list-item を指定 */
  color: hotpink;
  display: inline-block;
  width: 1.5rem;
  text-align: right;   /* この例ではテキストを右揃えに */
  margin-right: .5rem;
}

<ol class="count-down10">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ol>

<div class="jp-chapter">
  <h3>タイトル</h3>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  <h3>タイトル</h3>
  <p>Qui debitis, nulla eligendi cupiditate quasi et fugit.</p>
  <h3>タイトル</h3>
  <p>Ab quisquam omnis odio tempore! Impedit dolores libero.</p>
</div>

.jp-chapter {
  counter-reset: j-chapter;
}

.jp-chapter h3::before {
  counter-increment: j-chapter;
  /* counter() の第2引数にカウンタースタイルを指定 */
  content: '第' counter(j-chapter, cjk-ideographic) '章 ';
  color: goldenrod;
}

<ol class="nest">
  <li>項目</li>
  <li>項目
    <ol class="nest">
      <li>項目</li>
      <li>項目</li>
      <li>項目
        <ol class="nest">
          <li>項目</li>
          <li>項目</li>
        </ol>
        <ol class="nest">
          <li>項目</li>
          <li>項目</li>
          <li>項目</li>
        </ol>
      </li>
      <li>項目</li>
    </ol>
  </li>
  <li>項目</li>
  <li>項目</li>
</ol>

ol.nest {
  counter-reset: nested;
  list-style-type: none;  /* ul 要素の場合は指定 */
}

ol.nest li::before {
  counter-increment: nested;
  /* 区切り文字 "-" を挿入 */
  content: counters(nested, "-") ". ";
}