CSSでの罫線について。

Question

実現したいこと

HTMLもしくはCSSで配置した画像の左右どちらかから横棒線を実装したいです。
CSSのみで実現可能でしょうか。
かなり多くのサイトを調べましたが、実装もしくは解説をしているサイトが見当たらず、質問させていただきます。

イメージは下図。

補足情報（FW/ツールのバージョンなど）

chrome、ノートPCまたはデスクトップを想定しています。

Comments

[maisumakun]

どうしても「罫線」でなければならないのでしょうか？

（適当なボックスをものすごく細長く作る、ような手法は考えられます）

[green_frog]

コメントありがとうございます。
borderプロパティが思い浮かんだ為、罫線と表現しました。
他の方法があるならば、罫線でなくても問題はございません。

Answer 1

疑似要素（before/after）を利用する方法もご紹介させてください。
※ サンプルの画像は、違いがわかりやすいように半透明にしています。

• 動作確認用サンプル：https://jsfiddle.net/ejsL768x/

親要素のbeforeで横幅いっぱい線を敷いて、上に画像を重ねる方法

<div class="sample-1">
  <img src="https://placehold.jp/3d4070/ffffff/150x150.png" alt="150x150">
</div>

.sample-1 {
  position: relative;
}

.sample-1::before {
   content: "";
   display: block;
   width: 100%;
   height: 1px;
   position: absolute;
   top: 50%;
   left: 0;
   z-index: -1;
   transform: translateY(-50%);
   background-color: #ccc;
}

親要素のafterを線にして、flexで横に並べる方法

<div class="sample-2">
  <img src="https://placehold.jp/3d4070/ffffff/150x150.png" alt="150x150">
</div>

.sample-2 {
  display: flex;
  align-items: center;
}

.sample-2::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

Answer 2

線をひくならhrでもおいたらどうでしょう？

<style>
.img{
display:flex;
align-items: center;
}
.img img{
border:2px solid blue;
}
.img hr{
border:2px solid blue;
width:100px;
height:0px;
margin-left:-2px;
}

</style>
<div class="img">
<img src="#" alt="test" width="100" height="200">
<hr>
</div>