たまには役立つ記事でも発表するか。
今回はお題の通りインターネット帳面でもやってる「ＣＳＳで横三角をやる方法」。２バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。でも画像を使いたくはないぞと。そう思う人も多いだろうと勝手に思ってるので何かしら役立てば、と。 相変わらずFirefoxでしか確認してなければ他のブラウザのアイコンをクリックするのもしんどいのでハイブリッドマニアは勝手に修正されたし。アンカーにhoverした時だけピョッと出るとかするとイケますよ。多分な。
基本的にはソースはこんな感じで。言葉で言うと「◆を半分隠す」だけ。擬似要素にせずとも文の頭に◆があればfirst-letterとかで代用できるかもしれませんが、まあどうでもいいです。0.55という数値は別に0.5でも可です。0.55の方がエッジが効いて良いなと感じただけなので。ブラウザのフォントサイズに依存しないのが見所だよ。
/* 一例 */
h1,ul li {
overflow:hidden;
text-indent:-0.5em;
padding-left:0.5em;
}
h1:before,ul li:before {
content:"◆";
margin-left:-0.55em;
}
Powered by Movable Type Version 3.31-ja