UIデザイン実装便利帳〜見出し編 No3 強調したい文字の下に吹き出し風の下線を付ける方法

No3 強調したい文字の下に吹き出し風の下線を付ける方法

HTML

html

<h1>吹き出し風の見出し</h1>

css

css

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family:  "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
}

h1 {
    position: relative;
    line-height: 1.8;
    padding: 0 1rem;
    border-bottom: 3px solid #09b8ac;
    color: #333333;
    text-align: center
}

h1::before,
h1::after {
    position: absolute;
    left: 50%;
    transform:translate(-50%);
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

h1::before {
    background-color: #09b8ac;
}

h1::after {
    bottom: -11px;
    background-color: #fff;
}