Q&A
widtgh ←スペルミスありますけどここは問題ないですか？
複数行のテキストに、角丸のアンダーラインをつける方法を教えてください。
▼やりたいこと
以下のように複数行のテキストに角丸の下線を引きたいです。
html
1<p>テキストテキストテキストテキストテキストテキストテキスト<strong>テキストテキストテキストテキストテキストテキストテキスト</strong>テキストテキストテキストテキストテキ 2ストテキストテキストテキストテキス</p>
一行だけであれば、以下の方のように擬似クラスで下線を引けますが、複数行ではできません。。
https://itstudio.co/2015/11/12/4946/
background:linear-gradient等で以下の方のように複数行にラインや下線は引けますが、角丸はかけれません。。
複数行でできる方法を知っている方いれば教えていただけると嬉しいです。
よろしくお願いいたします。
スペルミスは問題ありません。参考コードは雑に打ってしまったので、、コピペではないです。
再現できるコードを提示しないと回答つきませんよ。今のコードだと折り返さなくても下線すらつきません。
ご回答ありがとうございます。 変なコードを載せて申し訳ありません。。 実際の環境は、上記コード以外にもほかのスタイルがあたっていますが、全ては面倒で書いていません。 （やっていたこと、やりたいことは分かるかと思います。） 参考コードのバグの改善方法のようなものを求めているのではありません。 上記方法ではどちらにせよ複数行でできないことは見て分かるかと思うので、、 全く違う方法を知りたいです。
せめてスペルミスなおしたもの、「以下のように擬似クラスで下線を引ける」ものを提示していただけませんか？「以下のように擬似クラスで下線を引けます」と書いてありながら、スペルミスはある、再現できない ではふざけてるように捉えられますよ。
すみません。参考コードで変な誤解を与えてしまったようなので消しました。他の方の記事引用がわかりやすいと思ったので、方法を知っている方教えていただければと思います。決して丸投げの質問はしているつもりはありません。。画像も投稿してますので、やりたいことは分かっていただけると思います。
回答1件
0
ベストアンサー
一見簡単そうですが、CSSだけしか使えず、そのHTMLの構造で行うなら、無理なんじゃないでしょうか。
(はやくborder-styleに端丸を追加して欲しいものですね...。)
もしかしたらJavaScriptを使えば可能かもしれませんが、JavaScriptについてあまり詳しくないので、とりあえず「そのHTML構造で、かつCSSだけでは不可能」という回答に止めます。
投稿2018/07/17 14:43
総合スコア2009
この度はご回答いただきありがとうございます。やはりCSSだけでは無理なのですね。。。できる方法があればと思いましたが、、ラインを引くためだけにJSを使うのも、、と思っております。
この度はご丁寧にご回答ありがとうございました！
あなたの回答
tips
プレビュー
