我正在尝试实现以下内容;旋转文本不是问题,但它下面的行是。它应该根据文本的长度而改变。意思是文本长度变化时线条会相应缩小或扩大。文本的顶部应保持在同一位置。垂直文本旁边的垂直线
任何想法?
编辑:
是我到目前为止已经试过(忽略柔性):
<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;
}
}
一些标记和例子你试过什么,什么你想获得帮助。 – BenM
请检查此链接:-http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css –
@ Gerrit0我已经编辑了帖子。 –