Q&A
text-decoration: underline;も手取り早かったのですが、下線と文字の隙間を開けられないため今回は使用していませんでした。
タイトルの通りなのですが、cssで複数行の文章に対してうまく下線を引く方法はないでしょうか。
試した方法は下記です。
一つ目は一番下にしかつかないのでうまく行きませんでした。
二つ目はwidthを指定をしないと中央に寄らないため100%すると端までborderが広がってしまいます。
調べたものの中では、border-radiusなどでマーカーのようなものになってしまうためうまく行きませんでした。
CSSで複数行に渡るテキストにマーカーを引いたようなエフェクトを付ける
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<style> 7.box { 8 width: 400px; 9 margin: 0 auto; 10} 11.sampleA { 12 border-bottom: 1px solid; 13 background: aqua; 14} 15 16.sampleB { 17 background: aliceblue; 18} 19.sampleB .hoge { 20 border-bottom: 1px solid; 21 display: inline-block; 22 text-align: center; 23 width: 100%; 24} 25 </style> 26</head> 27 28<body> 29<div class="box"> 30<p class="sampleA"> 31 あああああああ<br> 32 いいいいいい<br> 33 うううううう 34</p> 35 36<p class="sampleB"> 37 <span class="hoge hoge01">ああああああああああ</span><br> 38 <span class="hoge hoge02">いいいいいい</span><br> 39 <span class="hoge hoge03">うううううう</span> 40</p> 41</div> 42</body> 43</html>
何かうまい方法が教えていただきたいです。
よろしくお願いします。
回答3件
0
こんにちは
spanはそもそもinline要素なので、blockの指定を外して、widthに関する指定をなくせばいけますよ
html
1 <span>aaaa</span> 2 <br> 3 <span>bbbb</span> 4 <br> 5 <span>cccc</span>
css
1span { 2 border-bottom: 1px solid #000000; 3}
投稿2019/03/05 15:04
総合スコア180
0
参考先を基に、CSSを以下でどうですか？
CSS
1.box { 2 width: 400px; 3 margin: 0 auto; 4 text-align: center; 5} 6 7.sampleA { 8 display: inline; 9 background:aqua linear-gradient(transparent 95%, #000 0%); 10 line-height: 2.0em; /* ← 任意 */ 11 padding-bottom: 5px; /* ← 任意 */ 12}
-追記-
一部編集しました。
投稿2019/03/06 03:16
編集2019/03/06 03:20
総合スコア3525
0
text-decoration: underline;で。
【text-decoration - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration
投稿2019/03/05 15:00
総合スコア69625
中央寄せがしたいのであれば、全要素をdivで囲んで、そのdivに対してstyleをつけると良いです
``` html
<div class="container">
<span>aaaa</span>
<br>
<span>bbbb</span>
<br>
<span>cccc</span>
</div>
```
``` css
span {
border-bottom: 1px solid #000000;
}
.container {
width: 100%;
text-align: center;
}
```
失礼しました 打つ場所を間違えてしまいました。。。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/05 23:09
2019/03/05 23:43 編集