Home/ Questions/Q 8592487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:45:42+00:00

I am trying to get a string with each individual letter rotated 90 degrees;

  • 0

I am trying to get a string with each individual letter rotated 90 degrees; however, I want to keep the “flow” of letters going left-to-right, not vertical. I also want to keep that “strikethrough” horizontal green line (see images below).

What’s the simplest way to accomplish this? I prefer using JavaScript and/or CSS.

With the -transform: rotate CSS style I get the following:

do not want

<style type="text/css">
.rotate {
-webkit-transform: rotate(-90deg);
}
</style>
<body>
<div class="rotate">
<span style="color:#0C0; text-decoration:line-through;">
<span style="color:#000;">
A B C
</span></span></div>

What I would like to get is something like this, without resorting to a custom font.

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Pure CSS:

    <div class="letters">
    <span>A</span><span>B</span><span>C</span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

.letters {
    height:8px;
    line-height:16px;
    border-bottom:1px solid green;
    position:relative;
}
.letters > span {
    float:left;
    -webkit-transform: rotate(-90deg);
}​

    Demo

    • 0