網站正文中的文本內容CSS

Question

是否可以在CSS正文中顯示文本內容？

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

我想它一併中心。

Answer 1

該內容屬性保留爲:before和:after僞元素選擇器。您不能使用CSS更改元素的內容。 （除非你隱藏/放置元素在它上面的/ etc）

所以，你可以這樣做：

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

，但它不會改變body內容。

Answer 2

號

見the specification

內容屬性決定什麼是元素或僞元素中呈現。

對於元素，它只有一個目的：指定元素呈現爲正常，或用圖像替換元素（可能還有一些關聯的「替代文本」）。

由於您的目標是一個元素（而不是僞元素），所以您無法使用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'; 
 
}

或使用pseudoelement絕對定位。演示：

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%); 
 
}