cssで複数行の文章に対して下線を引く方法について

タイトルの通りなのですが、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件

こんにちは
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

FumiakiNakao

総合スコア180

roronoazoro

2019/03/05 23:09

ありがとうございます。そちらも試したのですが、下線は引けるのですが、inline要素なのでで中央寄せができなくて困ってしまいました。。

FumiakiNakao

2019/03/05 23:43 編集

中央寄せがしたいのであれば、全要素を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; } ``` ただしこのやり方は内部の要素がinline要素の時にしか使えないのでご注意を

行動規範の内容に同意します

参考先を基に、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}