フラメンコに関すること、フェスティバル・デ・ヘレスに関することを書き散らしています。ヨロシクね。
2019年11月08日 (金) | 編集 |
こんなカンジであるていどの分量の文章を書きぃの、文中にハイパーリンクを貼ることがよくある。ブログは基本文章を書くものなので、テキストに色がついていてクリックできそう感があればよい。むしろ色々装飾すると鬱陶しくなる(笑)。でもウェブサイトだと、ちょっとした案内の文章を書いてリンクを貼りたい場合がけっこうある。文章がメインじゃないし、なるべくリンクは目立って欲しい。たとえば、、、
詳しくはこちら

的なやつ。
これを多用する予定があるなら
毎度<a>タグ内に<img>タグを記述するのはダルいし忘れそうなので
疑似要素のbeforだのafterだのを使う。
あたしの場合はbefor一辺倒。
HTML
詳しくは<a href="URL">こちら</a>

CSS
a{
 border:1px solid black;
 padding:4px;
 background;gray;
}
a::befor{
 content:url("img/icon.png");
}
こいつが、、、afterなら問題なくアイコンが表示されたんだけど
よりによってbeforだとまったく何をやってもダメ
beforでハマる人が多いらしく
ぐぐちゃんに「疑似要素 befor 効かない」で聞くといろんなサイトがヒットします。
その中で、いいヒントをくれた記事はココ。
カメ飼ってる新米エンジニアの覚書き

以下のようにハックして実現しました。
HTML
詳しくは<a href="URL"><b></b>こちら</a>

CSS
a{
 border:1px solid black;
 padding:4px;
 background;gray;
}
a b::after{
 content:url("img/icon.png");
}
結局afterですよ。
<b>タグを吐き出しただけの空要素に対して指定しているので(←ハックの肝)
「こちら」の手前にアイコンが表示されることに変わりないから
beforでもafterでもどっちでもいいっちゃいいです。
実用上は問題ないんだけど、、、
このCSSコードのafterをbeforに書き換えただけでアイコン消えます
表示されません。
ブラウザのバグなんだか仕様なんだか知らないケド
beforはダメなんでございます。

ちなみにストリクト中毒の人は(←あたしだべ
CSSハックのためだけに空要素の<b>タグを埋めておくと
減点されないけどW3C CSS 検証サービスにワーニングがつくので
HTML
詳しくは<a href="URL"><b>空要素</b>こちら</a>

CSS
a{
 border:1px solid black;
 padding:4px;
 background;gray;
}
a b::after{
 content:url("img/icon.png");
}
a b{
 display:none;
}
とでもしておけばよいかと。



よんちゃんという名のヒューマンデバッガが befor じゃない beforeだ。
このスカタンがっっ。
と、(おそらく)秒でタイプミスを発見してくれました

コメント
この記事へのコメント
bofor は before じゃありませんこと?
eが落ちてるから、効かないとか?

今まで、syntax error やスペルミスは痛い目にあっているので
すぐ目についてしまいます。
外してたら、ごめんね。
2019/11/09(土) 07:01:39 | URL | よんちゃん #mQop/nM.[ 編集]
ビンゴだよ~!
くっそ悔しいよ~(笑)。
おかげさんでhtmlとcssの汚いコードを清掃できました。
グラシア☆
2019/11/10(日) 00:22:52 | URL | みゆき #-[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック