Html 垂直文本旁边的垂直线

我正在努力实现以下目标：；旋转文本不是问题，但它下面的行是。它应该根据文本的长度而改变。这意味着，如果文本长度发生变化，行将相应地收缩或扩展。文本顶部应保持在同一位置

有什么想法吗

编辑：

到目前为止我所尝试的（忽略flex）：

我现在在哪里

---

这是怎么回事？我添加了一些评论，向您展示正在发生的事情

html，
身体{
保证金：0；
填充：0；
}
.幻灯片放映{
位置：相对位置；
}
福赛尔先生{
宽度：500px；/*此宽度=图像的高度*/
位置：绝对；/*以下样式将此div移动到幻灯片div的中间*/
左：50px；
最高：50%；
转化：translateY（-50%）；
z指数：1；
}
img{
左边距：100px；/*这只是为文本留出空间*/
display:block；/*删除图像下方的任何空间*/
}
.forsale a{
/*这将旋转锚点，使其位于图像的一侧，并将其移动到forsale div的左侧*/
变换原点：中心；
变换：平移（-50%，0）旋转（270度）；
显示：块；
宽度：100%；
宽度文字装饰：无；
颜色：黑色；
}
.一半{
显示：块；
宽度：50%；
位置：相对位置；
文本对齐：右对齐；
}
半小时后{
/*这是黑线*/
内容：''；
显示：块；
宽度：100%；
位置：绝对位置；
左：0；
最高：50%；
边框顶部：1px实心#000000；
z指数：1；
}
.线隐藏{
/*这是为了覆盖文本下的黑线*/
位置：相对位置；
显示：内联块；
左填充：10px；/*行前需要多少空间*/
背景色：#ffffff；/*页面的底色-隐藏行*/
z指数：2；
}

---

这是怎么回事-我添加了一些注释，向您展示正在发生的事情

html，
身体{
保证金：0；
填充：0；
}
.幻灯片放映{
位置：相对位置；
}
福赛尔先生{
宽度：500px；/*此宽度=图像的高度*/
位置：绝对；/*以下样式将此div移动到幻灯片div的中间*/
左：50px；
最高：50%；
转化：translateY（-50%）；
z指数：1；
}
img{
左边距：100px；/*这只是为文本留出空间*/
display:block；/*删除图像下方的任何空间*/
}
.forsale a{
/*这将旋转锚点，使其位于图像的一侧，并将其移动到forsale div的左侧*/
变换原点：中心；
变换：平移（-50%，0）旋转（270度）；
显示：块；
宽度：100%；
宽度文字装饰：无；
颜色：黑色；
}
.一半{
显示：块；
宽度：50%；
位置：相对位置；
文本对齐：右对齐；
}
半小时后{
/*这是黑线*/
内容：''；
显示：块；
宽度：100%；
位置：绝对位置；
左：0；
最高：50%；
边框顶部：1px实心#000000；
z指数：1；
}
.线隐藏{
/*这是为了覆盖文本下的黑线*/
位置：相对位置；
显示：内联块；
左填充：10px；/*行前需要多少空间*/
背景色：#ffffff；/*页面的底色-隐藏行*/
z指数：2；
}

一些标记和示例您尝试过的内容和希望实现的内容会有所帮助。请检查此链接：-@Gerrit0我编辑了此帖子。这里有两种方法：一些标记和示例您尝试过的内容和希望实现的内容会有所帮助。请检查此链接：-@Gerrit0我编辑了此帖子。这里有两种方法：我的加号：）类似于但是，如果你不知道图像的高度（即它与窗口的比例），你会怎么做@JannesV不认为你能做到这一点，因为你需要知道文本的宽度才能知道文本的长度。唯一的另一个选择是使用javascript，这样你就可以计算FlyPlusss上图像的高度了。SS:）像charm一样工作，但是如果你不知道图像的高度（即它随窗口缩放），你会怎么做@JannesV不认为你能做到这一点，因为你需要知道文本的宽度才能知道文本的长度。唯一的另一个选择是使用javascript，这样您就可以实时计算图像的高度

<section class="slideshow">

    <div class="forsale">
        <a href="#">te koop</a>
        <span></span>
    </div>

  <img src="./img/project_1.jpg" alt="">

</section>

  .forsale {

position: relative;
a {
  position: absolute;
  transform: rotate(-90deg) translate(0 ,100%;
  transform-origin:0% 0%;
  background-color: #eee;
  display: block;
  text-decoration: none;
  color: black;
  width: 385px;
}
span {
  display: block;
  width: 1px;
  height: 100%;
  background-color: black;
  position: absolute;
  left: 50%;
  bottom: 0;
}

}