html - コンテンツの疑似クラスに空白を追加する

Question

コンテンツ疑似クラスを使用してスペースを追加するにはどうすればよいですか？

以下のコードを使用して、単一のスペースを追加しています。

h3:before{content:" "}

コンテンツを使用してスペースを追加する必要があります。

PS：htmlplsに追加はありません

score 2 · Accepted Answer

スペースの代わりにパディングを使用するのはどうですか？

h3 {
    padding-right: 10px
}

score 0 · Accepted Answer

...........................................。

マージンまたはパディングに使用されますafter

このように

h3:before{content:"";
margin-left:40px;
}

score 0 · Accepted Answer

テキストの最初の行の前にスペースを作りたいだけなら、なぜ使用しないでください

h3:first-line{padding:0 0 0 40px;} or
h3{padding:0 0 0 40px;}

これらの「パディング」は、

padding-top padding-right padding-bottom padding-left

score 0 · Accepted Answer

これを実現する別の解決策は、「word-spacing」プロパティを使用して、各スペースが使用しているスペースを増やすことです。

たとえばword-spacing: 10px;、各スペースが10ピクセルを占めるようにします。

これにより、複数の単語を含む単一の疑似要素を使用しながら、支援できない場所marginに区切りを追加することができます。padding

例

.my-class::before {
    content: 'One Two Three';
    word-spacing: 10px;
}

より詳細な制御が必要な場合は、contentプロパティ内のスペースをエスケープし、エスケープwhite-space: pre;されたスペースを表示できるようにすることもできます（ほとんどの要素でデフォルトで無視されるため）。

例

.my-class::before {
    content: 'One \ \ Two \ \ Three';
    white-space: pre;
}

参照：

4 に答える 4