鍍金池/ 問答/HTML/ css中如何設置元素偽類中的content內(nèi)文字豎排？

css中如何設置元素偽類中的content內(nèi)文字豎排？

css中如何設置元素偽類中的content內(nèi)文字豎排？如圖下紅字

圖片描述

回答
編輯回答
夏木

css屬性 writing-mode

2017年2月27日 21:12
編輯回答
練命

writing-mode 取值如下：
horizontal-tb（默認值）：自上而下，從左到右。（類似IE私有值lr-tb）
vertical-rl：從右到左，自上而下的豎排書寫方式。（類似IE私有值tb-rl）
vertical-lr：從左到右，自上而下的豎排書寫方式。

2017年4月11日 06:32
編輯回答
傻丟丟

設置為inline-block,給一個一個字的寬度

2018年2月11日 22:50
編輯回答
小曖昧
<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        div:before{
            content: '打完';
            writing-mode: tb;
            position: absolute;
            font-size: 12px;
            left: -20px;
            top:5px;
        }
        div{
            position: relative;
            margin-left: 20px;
            font-size: 24px;
        }
    </style>
</head>
<body>
<div>洼地</div>
<script>
</script>
</body>
</html>
2017年2月5日 08:13
編輯回答
情皺
content: '設\A為\A默\A認';
white-space: pre; // 換行
position: absolute;
line-height: 1; // 間距

補充：DEMO

2017年10月28日 12:36