CSS h1 にサブタイトルを付けるには？

/ CSS / By
ショコラ
ショコラ

CSS h1 にサブタイトルを付けるには？

デザイナーに外注した時に、このような感じになっていて、どうやったらスラッシュが描けるのか調査してみょうと思いました。

もっさん先輩
もっさん先輩

↓下のような感じの見た目のタイトルを作成できます。

ポイントは、subクラス で display:inline-block で横並びと position:relative にして、sub.after で subクラス の前に スラッシュを描いている所です。

<html>
<body>

<style>
div.sub
{
  display:inline-block;
  position:relative;
  margin-left: 30px;
}
div.sub:after
{
  position: absolute;

  content: "";
  width: 2px;
  height: 30px;
  top: 8px;
  left: -17px;
  transform: rotate(25deg);
  background: #d4212b;
}
</style>

<div style="text-align: center;">
  <h1>title<div class="sub">sub-title</div></h1>
</div>

</body>
</html>

以上

Scroll to Top