Android7.0にて作業中です。
ブログの文章の中に区切り線をつけようと思い、下記のページからサンプルコードを持ってきました。
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック | コリス
[https://coliss.com/articles/build-websites/operation/css/css-simple-styles-for-horizontal-rules-by-css-tricks.html]
CSS
1hr.style-eight { 2 3 padding: 0; 4 5 border: none; 6 7 border-top: medium double #333; 8 9 color: #333; 10 11 text-align: center; 12 13} 14 15hr.style-eight:after { 16 17 content: "§"; 18 19 display: inline-block; 20 21 position: relative; 22 23 top: -0.7em; 24 25 font-size: 1.5em; 26 27 padding: 0 0.25em; 28 29 background: white; 30 31} 32 33
本来ならば二重線の真ん中にcontentで指定した記号が来る筈なのですが、なかなかうまく行きません。
数値を調整しても、下半分しか顔を出していなかったり、そもそも記号が表示されなかったり…
リンク先サイトではきちんと線の真ん中に表示された画像がありますし、コード自体もそのままコピペしてきただけなのですが、違った挙動をするのはなぜなのでしょうか。
codepenなどのサイトでも、思ったとおりの表示にならなかったので、ブラウザによって表示に差が出ることもあるのか気になっています。
詳しい方、教えていただければ幸いです。よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/04 13:51
2018/05/15 14:46