###前提・実現したいこと
font-familyはメイリオで、aタグに点線下線(text-Decoの様に)を付けたいです。
色々試してみたのですが、どうしてもテキストの下に隙間ができてしまいます。
レスポンシブページになる為、aタグは二列、三列になる可能性があります。
折り返しがある事を前提としている為、あえてpタグの横幅は150pxで決め打ちしています。
###該当のソースコード
html
1<p> 2 テストテキスト。テストテキスト。<a href="#">テストテキスト。テストテキスト。テストテキスト。</a>テストテキスト。テストテキスト。 3</p>
css
1*{ 2 padding: 0; 3 margin:0; 4} 5p{ 6 width: 150px; 7 font-size: 20px; 8 line-height: 1.5em; 9} 10a{ 11 text-decoration: none; 12 color:#ff0000; 13 border-bottom: 1px dashed #0000ff; 14 font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; 15}
###試したこと
■text-decoration: underline dashed; はクロームで表示されなかった為使用できませんでした。
■display:blockにする事で高さを持つようにしたのですが、二列三列の時に上段一列目にだけ表示されてしまいました。
■positionで無理やり定位置に持って行こうと思ったのですが、多数あるページのブログ内リンク全ての装飾に使いたい為、位置がユーニク過ぎて実現不可能と感じました。
結構無理やりな感じでもいいので、何かいい案がございましたらご教授下さい。
よろしくお願いします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/07/25 13:12 編集
2016/07/26 12:34