Search code examples
htmlcssrotationvertical-text

Vertically Render content:attr(data-content) in CSS

I would like to render text vertically one by one using CSS. If using rotation method, we can get like below,

Actual rotation

But I am expected to render the text like below,

Expected output

Could anybody tell me your suggestion on this?

Note: I am setting this text using 'content:attr(data-content)' in CSS and data-content is "HELLO".

Solution

  • You can break each character of content:attr(data-content) like following way:

    .test::after {
    content: attr(data-content);
    font-size: 25px;
}
.test {
    width: 0;
    word-break: break-all;
}
    <div class="test" data-content="Hello"></div>