div {
height: 100vh;
width: 100vw;
background: #000;
color: white;
font-size: 30vh;
}
span{
font-family: sans-serif;
padding: 2vw;
margin: 2vw;
font-weight: bold;
}
#name:before {
position: relative;
display: inline-block;
content: "I AM";
transform: rotate(-90deg);
font-size: 7vw;
margin-right: -10vw;
font-weight: lighter;
}<head><link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
</head>
<body>
<div>
<span id="name">
test
</span>
<br />
<span id="verb">
Hello</span>
<br />
<span id="verb_two">
World!</span>
</div>
</body>我正在尝试垂直旋转内联 block :before 元素并将其放置在跨度的一侧。所以，我希望“I AM”文本的宽度与“test”中“t”的长度相同，并希望它被放置在与“test”具有相同基准水平的一侧。我该怎么做？
最佳答案
一种可能，玩写模式:
div {
height: 100vh;
width: 100vw;
background: #000;
color: white;
font-size: 15vw;
}
span{
font-family: sans-serif;
padding: 2vw;
margin: 2vw;
font-weight: bold;
}
#name:before {
position: relative;
display: inline-block;
content: "I AM";
transform: rotate(180deg);
writing-mode: vertical-rl;
font-size: 7vw;
margin-right: -4vw;
font-weight: lighter;
left: -2vw;
bottom: 0px;
background-color: red;
height: 15vw;
padding: 1vw;
}<head><link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
</head>
<body>
<div>
<span id="name">
test
</span>
<br />
<span id="verb">
Hello</span>
<br />
<span id="verb_two">
World!</span>
</div>
</body>关于html - 定位旋转inline-block伪元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44481646/