垂直文本旁边的垂直线

Question

我正在尝试实现以下内容;旋转文本不是问题，但它下面的行是。它应该根据文本的长度而改变。意思是文本长度变化时线条会相应缩小或扩大。文本的顶部应保持在同一位置。

任何想法？

编辑：

是我到目前为止已经试过（忽略柔性）：

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