Question

是否可以在CSS正文中显示文本内容？

body {
  content: 'YES';
  background: lightblue;
}

我希望它也能集中在一起。

Answer 1

content属性保留给:before和:after伪元素选择器。您无法使用CSS更改元素的内容。（除非你隐藏/放置元素顶部/等）

所以你可以这样做：

body:after{
    content: "YES";
    color: lightblue;
    display: block;
    text-align: center;
}

但不会更改body的内容。

Answer 2

没有。

请参阅the specification

content属性指示在元素或伪元素内呈现的内容。

对于元素，它只有一个目的：指定元素呈现为正常，或用图像替换元素（可能还有一些关联的“替代文本”）。

由于您要定位元素（而不是伪元素），因此无法使用CSS更改文本内容。

Answer 3

可以使用CSS显示内容。要显示content，您需要伪选择器，:before或:after。

要使其居中，您需要使用flexbox。演示：

body {
  /* become a flex container */
  /* pseudoselectors are also children so they will be treated as flex-items */
  display: flex;
  /* vertically center flex-items */
  align-items: center;
  /* horizontally center flex-items */
  justify-content: center;
  margin: 0;
  /* make body occupy minimum 100% of screen height */
  min-height: 100vh;
  background: lightblue;
}

body:before {
  content: 'YES';
}

或者对伪元素使用绝对定位。演示：

body {
  background: lightblue;
}

body:before {
  content: 'YES';
  position: absolute;
  /* remove this if you don't need vertical centering */
  top: 50%;
  /* remove this if you don't need horizontal centering */
  left: 50%;
  /* replace with translateX(-50%) if you need only horizontal centering */
  /* replace with translateY(-50%) if you need only vertical centering */
  transform: translate(-50%, -50%);
}

网站CSS正文中的文字内容

3 个答案: