ウェブサイトの本文のテキストコンテンツCSS

Question

CSSの本文にテキストコンテンツを表示することはできますか？

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

私はそれが同様にセンタリングされるようにしたいと思います。

Answer 1

contentプロパティは、:beforeと:after疑似要素セレクタ用に予約されています。 CSSを使用して要素の内容を変更することはできません。だから、あなたができる

（あなたが/場所それは/ etcの上に要素を非表示にしない限り）：

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

が、それはbodyの内容は変更されません。

Answer 2

号

がthe specification

を見るコンテンツプロパティは、要素または擬似要素の内部にレンダリングされるものを決定します。

要素の場合、要素が通常どおりレンダリングするか、または要素をイメージ（および場合によっては関連する「代替テキスト」）で置き換えることを指定するのは、目的が1つだけです。

擬似要素ではなく要素を対象としているため、CSSでテキストコンテンツを変更することはできません。

Answer 3

CSSを使用してコンテンツを表示することは可能です。 contentを表示するには、擬似セレクタ:beforeまたは:afterが必要です。

センターに置くには、どちらかのフレックスボックスが必要です。デモ：

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のための絶対位置を使用しています。デモ：after`：あなたは `を探している

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