定位旋转inline-block伪元素

Question

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>

我正在尝试垂直旋转内联块 :before 元素并将其放置在跨度的一侧。所以，我希望 "I AM" 文本的宽度与 "test" 中 "t" 的长度相同，并希望它被放置在与 [= 具有相同基准水平的一侧22=]。我该怎么做？

Answer 1

div {
  height: 100vh;
  width: 100vw;
  background: #000;
  color: white;
  font-size: 30vh;
}

span{
  font-family: sans-serif;
  padding: 2vw;
  margin: 2vw;
  font-weight: bold;
  position: relative;
}
#name{
 margin-left: 32px;
}
#name:before {
    position: relative;
    display: inline-block;
    content: "I AM";
    transform: rotate(-90deg);
    margin-right: -10vw;
    font-weight: lighter;
    left: calc(-5%);
    top: -14px;
    font-size: 11vh;
}

<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>

Answer 2

更改了 name:before class 的一些 css 属性。

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-weight: lighter;
  font-size:10vh;
  left:4vw;
  bottom:15px;
}

<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>

Answer 3

一种可能，玩写模式：

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>

定位旋转inline-block伪元素

Postioning rotated inline-block pseudo element

html

css

frontend

web