横にborderを引きたい

<div class="container-fluid">
				  <div class="row">
				    <div class="col-sm-9"><i class="fa fa-dot-circle-o" aria-hidden="true"></i>
								<p>日本で、目にランクされる石油大国となります。
								</p>
					</div>
				    <div class="col-sm-3">	
					<div class="one">
					<p>通称：主</p>	<p>年齢：３６歳</p>	
					<p>性別：男性</p>	<p>履歴書</p>
						<p>私、主が日々気になったことなどをつづります...</p>
					</div>
					<div class="">
					</div>
				
					
				    </div>
				</div>

<i class="fa fa-dot-circle-o" aria-hidden="true"></i>というコードがあります。これは、サークルを描く、fontawesomeのコードなのですが、これの右隣に、一本の横に伸びるボーダーを敷きたいと思います。
HRだと一行使ってしまうし、divやp,spanでやりましたが、出来ませんでした。アドバイスお願いいたします。

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

回答1件

ベストアンサー

こんにちは。

iタグにclassかid(例：.i-line)を付与する
下記のスタイルを追加する
微調整する

css
1.i-line {
2  position: relative;
3  width: 100%;
4}
5.i-line:after {
6    border-bottom: 0.3em solid #000; /* 線の高さと色はこちらで調節 */
7    position: absolute;
8    top: calc((1em - 0.3em) / 2); /* 線の位置はこちらで調節(線の高さが変わった時に、ここの0.3emを設定した線の高さに書き換えればOKです) */
9    content: " ";
10    left: 1em;
11    right: 0;
12}