CSSだけであの気になる米印(※)の段差を付ける方法

2016/5/19更新

ホームページをよく作っている人は度々目にすることがあるであろう米印。

←これです。

注意点などの前によく付けたりしますが、折り返しの時、2行目になった時に※の下に文字が回り込んでしまう。

textindent

米印に限った話ではないですが、最初の一文字だけを前に出したい時に使える方法を2つ紹介します。

text-indentを使う

おそらくこれが一番簡単。

padding-leftで左側に1文字分スペースを空け、text-indentで一行目だけ下げる方法です。text-indentはマイナスの値を入れることも出来ます。

擬似要素を使う

擬似要素のbeforeを使ってやる方法です。

こちらの特徴は「※」が文字として認識されないので、コピーする時に「※」が対象にならないことです。ただtext-indentと比べると対応ブラウザは少ないので、IE7以前のものも対象に含める場合はtext-indentを使った方がいいでしょう。

ご不明な点があればお気軽にコメントください( ˘ω˘)

タイムチケットやってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


トラックバック:https://recost-design.com/1655.html/trackback