UIデザイン実装便利帳〜見出し編 No1 強調したい文字の上に傍点をつける方法

No1 強調したい文字の上に傍点をつける方法

HTML

html

<h1>見出しを<span class="text-emphasis-dot">強調させる</span>デザイン
</h1>

CSS

css

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family:  "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
}
h1 {
  font-size: 2rem;
  line-height: 4rem; 
  font-weight: 700;
}
.text-emphasis-dot {
  padding-top: 16px;
  background-position: top left 6px;
  background-repeat: repeat-x;
  background-size: 30px 10px;
  background-image: radial-gradient(3px 3px at center center, #D55, #D55 100%, transparent);
}

文字の上に傍点を付けるためのクラス

css

.text-emphasis-dot {
  padding-top: 16px;
  background-position: top left 6px;
  background-repeat: repeat-x;
  background-size: 30px 10px;
  background-image: radial-gradient(3px 3px at center center, #D55, #D55 100%, transparent);
}