怎样用伪类元素 before 实现靠左上角直角角标，里面文字不使用子元素，进行倾斜45度

要使用伪类元素 `before` 实现靠左上角直角角标，里面文字不使用子元素，进行倾斜45度，可以按照以下步骤进行：

1. 创建一个元素，例如一个 `div`，并设置其 `position` 为 `relative`。
2. 为该元素创建一个伪类元素 `before`，并设置其 `content` 为需要显示的文字。
3. 设置伪类元素 `before` 的 `position` 为 `absolute`，并将其定位到父元素的左上角处。
4. 设置伪类元素 `before` 的 `width` 和 `height` 为 `0`，并设置其 `border` 的宽度和颜色，以创建一个直角三角形。
5. 旋转伪类元素 `before` 45 度，并将文本倾斜回来。

下面是一个示例 CSS 代码：

.container {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #ccc;
  padding: 20px;
}

.container:before {
  content: "可选";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 30px solid red;
  border-right: 30px solid transparent;
  transform: rotate(-45deg);
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 30px; /* 与 border-top 的高度一致 */
}

.container:before {
  transform-origin: top left;
}

在上面的示例中，我们将 `content` 属性设置为 `"可选"`，并将其样式设置为与 `span` 元素相同。我们将伪类元素 `before` 定位到左上角，并设置其 `border-top` 和 `border-right` 来创建一个直角三角形。然后，我们旋转伪类元素 `before` 45 度，并将文本倾斜回来。最后，我们将 `transform-origin` 属性设置为左上角，以确保伪类元素的旋转和倾斜是相对于左上角进行的。