※マークとか最初の一文字だけインデントしておいて欲しい場合のCSS

Web制作

HTML・CSS

※マークとか最初の一文字だけインデントしておいて欲しい場合のCSSのアイキャッチ画像

※マークとか最初の一文字以降は改行してもインデントしておいて欲しいときのCSSです。なんかこの系あんまり使わないんで忘れちゃうから備忘録兼ねて記事にします。

何通りかやり方はある

何通りかやり方はあります。一番面倒に感じてしまうのでが擬似要素のbeforeやafterのcontentを使う方法です。spanやemで囲ってしまうのはお手軽ですね。まぁでも一般的にはfirst-letterですかね。

擬似要素before or afterを使う場合

コード

p.sham-cation {
    position: relative;
    padding-left: 1.4em
}
p.sham-cation::before {
    content: '※';
    position: absolute;
    left: 0;
    top: 0;
    color: red
}

書いてみれば案外面倒じゃない擬似要素

表示例

この文章はサンプル文章で特に意味のない文章です。文字数をある程度書かなくてはならないと検証できないのでちょっと長めに書いています。テキストが入りますではちょっと味気ないけど、結局同じですよね。このぐらいで大丈夫かな。

spanやemを使う場合

spanで囲む場合はmarginじゃなくてtext-indentをマイナスに設定します。inline-blockも忘れちゃダメです。

コード

p.span-cation {
    padding-left: 1.4em
}
p.span-cation span {
    display: inline-block;
    text-indent: -1.4em;
    color: red
}

表示例

※この文章はサンプル文章で特に意味のない文章です。文字数をある程度書かなくてはならないと検証できないのでちょっと長めに書いています。テキストが入りますではちょっと味気ないけど、結局同じですよね。このぐらいで大丈夫かな。

first-letterを使う場合

一般的にはfirst-letterですかね〜とか言っときながらfirst-letterは※マークには使えません。どうやら※マークは一文字とカウントしていなみたいです。

コード

p.first-letter-cation {
    position: relative;
    padding-left: 1.4em
}
p.first-letter-cation::first-letter {
    display: inline-block;
    margin-left: -1.4em;
    color: red
}