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>

我正在尝试垂直旋转内联块：在元素之前并将其放置在跨度的一侧。因此，我希望“I AM”文本的宽度与“test”中“t”的长度相同，并希望它在与“test”具有相同基本级别的一侧提出。我怎么能这样做？

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类的一些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>

位置旋转的内联块伪元素

3 个答案: