CSSで縦書きかつ英文字を左向きにするには

Question

画像の灰色の文字（Lodge）のように、縦書きでさらに英文字の頭を左向きにする（画像１つ目）にはどのような表現方法があるのでしょうか？
writing-modeプロパティとtext-orientationプロパティを使って縦書きにすることはできる（画像２つ目）のですが、英文字の頭がどうしても左向きになりません。
擬似要素にて表現しているのですが、ご教授いただければ幸いです。

.section__header--2::before{
  content: 'Lodge';
  writing-mode: vertical-rl;
  text-orientation: sideways;
  color: #707070;
}

Answer 1

こちらでいかがでしょうか?

[1] 縦書きにしたあと180度回転

.section__header--2::before {
  content: 'Lodge';
  writing-mode: vertical-rl;
  text-orientation: sideways;
  color: #707070;
  
  /* 追加、180度回転 */
  transform: rotate(180deg);
}

[2] -90度回転
position: absolute;やposition: fixed;を指定している場合は、以下の記述だけでもよさそうです。

.section__header--2::before {
  content: 'Lodge';
  /*
  writing-mode: vertical-rl;
  text-orientation: sideways;
  */
  color: #707070;
  
  position: absolute;
  
  /* 追加、-90度回転 */
  transform: rotate(-90deg);
}

Comments

[enjinia555]

実現できました。ありがとうございます。