質問: ``` 日本で、目にランクされる石油大国となります。 通称:主 年齢:36歳 性別:男性 履歴書 私、主が日々気になったことなどをつづります... ``` というコードがあります。これは、サークルを描く、fontawesomeのコードなのですが、これの右隣に、一本の横に伸びるボーダーを敷きたいと思います。 HRだと一行使ってしまうし、divやp,spanでやりましたが、出来ませんでした。アドバイスお願いいたします。
回答: こんにちは。 1. iタグにclassかid(例:.i-line)を付与する 2. 下記のスタイルを追加する 3. 微調整する ``` .i-line { position: relative; width: 100%; } .i-line:after { border-bottom: 0.3em solid #000; /* 線の高さと色はこちらで調節 */ position: absolute; top: calc((1em - 0.3em) / 2); /* 線の位置はこちらで調節(線の高さが変わった時に、ここの0.3emを設定した線の高さに書き換えればOKです) */ content: " "; left: 1em; right: 0; } ``` こんな感じでいかがでしょうか。