画像と画像の間の横線を、画像の上に載せる方法

自身のコードではこのような表示なのですが、間の横線を画像の上に寄せるような横線にするにはどうすればいいのでしょうか？

html
1<html>
2  <head>
3    <meta charset="utf-8">
4    <link rel="stylesheet" href="main.css">
5  </head>
6  <body>
7    <div class="main7_flex_left">
8      <div class="main7_center">
9          <p>指</p>
10          <img class="main7_img sen" src="指.jpg">
11      </div>
12      <div class="main7_kara"></div>
13      <div class="main7_center">
14        <p>悩み</p>
15          <img class="main7_img" src="悩み.jpg">
16      </div>
17  </div>
18  </body>
19</html>

css
1@charset "utf-8";
2
3body{
4  margin: 0;
5  padding: 0;
6}
7
8
9
10.main7_flex_left{
11  margin: 0 auto;
12  display: flex;
13  width: 400px;
14  justify-content: space-between;
15}
16
17
18.main7_img{
19  width: 150px;
20  height: 150px;
21}
22
23.main7_kara{
24  width: 120px;
25  height: 140px;
26  border-bottom: 2px solid #666666;
27}
28
29.main7_center{
30  width: 45%;
31  height: 250px;
32}
33
34.main7_center p{
35  text-align: center;
36  font-family: "游ゴシック", "YuGothic", sans-serif;
37  font-weight: normal;
38  font-size: 18px;
39}

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

回答2件

ベストアンサー

ネガティブマージンを使って重ねたらどうでしょう。
Flexを使っているのでflex-shrink: 0;で自動縮小しないようにするのと、
z-index で前面に移動させておく必要があります。

css
1.main7_kara{
2  width: 120px;
3  height: 140px;
4  border-bottom: 2px solid #666666;
5  /* 以下追加 */
6  margin-left: -10px;
7  margin-right: -10px;
8  flex-shrink: 0;
9  z-index: 2;
10}

投稿2021/12/04 07:32

総合スコア34075

2021/12/05 02:16

ありがとうございます！丁寧に対応してくださり、感謝いたします。

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

画像と画像の間の横線を、画像の上に載せる方法

SVG で画像と線を表示するというのは如何でしょうか？

■ サンプルコード

html
1<div class="main7_flex_left">
2<svg version="1.1" id="svg" width="100%" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg">
3<defs>
4<symbol id="header">
5<text x="65"  y="30" font-size="25">指</text>
6<text x="250" y="30" font-size="25">悩み</text>
7</symbol>
8<symbol id="images">
9<image href="指.jpg"   x="0"   y="0" height="150" width="150"/>
10<image href="悩み.jpg" x="200" y="0" height="150" width="150"/>
11<line x1="100"  y1="75"  x2="250" y2="75" stroke="#ff0000" stroke-width="3"/>
12</symbol>
13</defs>
14<use x="0" y="0"  xlink:href="#header"/>
15<use x="0" y="50" xlink:href="#images"/>
16</svg>
17</div>