html - 垂直文本旁边的垂直线

Question

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

有什么想法吗？

编辑:

到目前为止我已经尝试过的(忽略 flex):

<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;
}

}

我现在在哪里

Answer 1

这是怎么回事 - 我已经添加了评论来告诉你发生了什么

html,
body {
  margin: 0;
  padding: 0;
}
.slideshow {
  position: relative;
}
.forsale {
  width: 500px;   /*this width = height of image */
  position: absolute;  /* the following styles move this div to the middle of the slideshow div*/
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
img {
  margin-left: 100px; /* this is just making space for the text */
  display: block; /* removes any space below the image */
}
.forsale a {
  /* this rotates the anchor so it is dow the side of the image and moves it to the left of the forsale div */
  transform-origin: center;
  transform: translate(-50%, 0) rotate(270deg);
  display: block;
  width: 100%;
  width text-decoration: none;
  color: black;
}
.half {
  display:block;
  width: 50%;
  position: relative;
  text-align: right;
}
.half:after {
  /* this is the black line */
  content: '';
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  border-top: 1px solid #000000;
  z-index: 1;
}
.line-hide {
  /* this is to cover the black line under the text*/
  position: relative;
  display: inline-block;
  padding-left: 10px; /* however much space you want before the line */
  background-color: #ffffff; /* bacground colour of the page - hides the line */
  z-index: 2;
}

<section class="slideshow">
  <div class="forsale">
    <a href="#"><span class="half"><span class="line-hide">te koop</span></span></a>
  </div>

  <img src="http://lorempixel.com/100/500/sports/1" alt="">
</section>