[CSS]縦線と横線を交差させるには

聞きたいこと

CSSの擬似クラスを用いて、

リスト全体の左側に縦線
1つ目のリストの終わりに横線

を表示したいと思っています。
それぞれの線が交わって、交差点のように突き抜けてほしいのですが、横線が左側に伸びてくれません。

コード

html
1<!DOCTYPE html>
2<html>
3<head>
4</head>
5<body>
6  <div class="main">
7    <ul class="main-list">
8      <li class="first">Hello</li>
9      <li>Hello</li>
10      <li>Hello</li>
11    </ul>
12  </div>
13</body>
14</html>

css
1.main::before{
2  content: '';
3  display: inline-block;
4  background: #BD0404;
5  height: 50px;
6  width: 4px;
7  margin-right: 1px;
8}
9
10.main-list {
11  display: inline-block;
12  list-style: none;
13}
14
15.first::after{
16  content: '';
17  display: block;
18  background: #BD0404;
19  height: 3px;
20  width: 100px;
21  margin-right: 5px;
22}
23

参考資料

参考画像

kei344

2020/01/22 08:18

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）

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

回答1件

ネガティブマージンを設定すればいいのでは。

css
1.first::after{
2  content: '';
3  display: block;
4  background: #BD0404;
5  height: 3px;
6  width: 100px;
7  margin-right: 5px;
8  margin-left: -60px; /*追加*/
9}