良く見出しに \ゆっくりしていってね/
みたいな飾りを付けることがあります。
ただ、これを文字でやると、角度が変えられないのでちょっと微妙です。
またアクセシビリティ的にも文字で書かれていると、スクリーンリーダーで読み上げられてしまうので、あまりよろしくありません。
CSSで解決してみましょう。
<h2>ゆっくりしていってね</h2>
h2 {
display: flex;
justify-content: center;
align-items: flex-end;
line-height: 1;
color: #f11f8d;
}
h2::before,h2::after {
width: 1px;
height: 28px;
content: "";
background-color: #f11f8d;
}
h2::before {
margin-right: 0.5em;
transform: rotate(-30deg);
}
h2::after {
margin-left: 0.5em;
transform: rotate(30deg);
}
JSBin
https://output.jsbin.com/cixeyof
意外に簡単ですね。