Javascript 根据父元素高度动态对齐伪元素

我正在尝试使用css

：after

。一行{
字号：2em；
宽度：150px；
最小高度：50px；
高度：自动；
背景：蓝色；
保证金：5px；
位置：相对位置；
颜色：#fff；
}
.一行：之后{
内容：''；
显示：块；
位置：绝对位置；
排名：0；
左：100%；
宽度：0；
身高：0；
边框顶部：25px实心透明；
边框底部：25px实心透明；
左边框：25px实心红色；
}

---

<文本> BR> < BR> < /代码> < P> >，您可以选择箭头相同的大小并将其对齐在中间，通过改变顶部到“代码>顶部：50%；代码>和添加

转换：translateY（-50%）


。一行{
宽度：150px；
最小高度：50px；
高度：自动；
背景：蓝色；
保证金：5px；
位置：相对位置；
颜色：#fff；
}
.一行：之后{
内容：''；
显示：块；
位置：绝对位置；
左：100%；
宽度：0；
身高：0；
边框顶部：25px实心透明；
边框底部：25px实心透明；
左边框：25px实心红色；
最高：50%；
转化：translateY（-50%）；
}
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
下面是一个使用
剪辑路径
的解决方案。其思想是在多边形中使用%值仅显示所需的形状，并且无论高度如何，它都将始终有效：


。一行{
字号：2em；
宽度：150px；
最小高度：50px；
高度：自动；
背景：蓝色；
保证金：5px；
位置：相对位置；
颜色：#fff；
}
.一行：之后{
内容：''；
显示：块；
位置：绝对位置；
排名：0；
底部：0；
宽度：25px；
右：-25px；
背景：红色；
-webkit剪辑路径：多边形（100%50%，0.0，0.100%）；
剪辑路径：多边形（100%50%，0.0，0.100%）；
}
text
text

文本
文本
文本

文本
text
text
text
text
text
text
text
text
使用svg路径作为
背景图像
，可以将
背景大小
属性拉伸为
100%100%
。只需确保svg具有
preserveSpectratio=“none”

。一行：之后{
背景图像：url（'data:image/svg+xml；charset=UTF-8'）；
位置：绝对位置；
排名：0；
左：100%；
身高：100%；
宽度：25px；
背景大小：100%100%；
背景重复：无重复；
显示：块；
内容：''；
}

谢谢你的回答，我已经想到了。我仍在努力实现上述行为。虽然只针对最多两行文本。它应该是
background repeat
，而不是repeat。顺便说一句，很好的解决方案谢谢你指出这一点。这是一个好问题，因为知道：before元素不是dom元素，所以js无法访问它（为了设置border-bottom和top=div/2的高度）。另外，添加样式标记实际上只对一个div有效（如果多个div具有相同的类…），谢谢@Temani的回答，您总是一个帮助。我将查找浏览器兼容性。@bhansa welcome；）顺便说一句，我想你只会发现IE和往常一样的问题：）@bhansa我添加了另一个应该更受支持的解决方案：）
.one-line:after {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 25.1 50" style="enable-background:new 0 0 25.1 50;" xml:space="preserve"><polygon class="st0" points="0,50 0,50 25,25 0,0" fill="#ff0000"/></svg>');
    position: absolute;
    top: 0;
    left:100%;
    height: 100%;
   width: 25px;
    background-size: 100% 100%;
    background-repeat:no-repeat;
    display: block;
    content:'';
}