css - 如何创建一个有条件的反应指针箭头，将换行符与 CSS 连接起来？

Question

关于如何在下图中制作箭头元素的任何想法？

对于上下文，我正在开发一个项目，该项目利用拖放库 (VueDraggableNext) 并根据设置的宽度进行换行。我想要一个在元素达到最大宽度时有条件地呈现的箭头。从换行符的左侧开始，并指向新行的开头。它本身并不需要移动，它本身可以是一个静态元素，但我需要尽可能接近图像。

关于如何做到这一点的任何想法？我可以将它作为一个 svg 仅在有换行符时有条件地显示，但我希望当只有一个项目时末端向右增长。伪元素是要走的路吗？我也没有太多运气来复制这种精确的设计。

我已经为它制作了一个快速的CodeSandbox，我一直在尝试弄乱它。

https://codesandbox.io/s/vue3-tailwind-forked-7uxvc?file=/src/App.vue

干杯!

注意：无论出于何种原因，codesandbox 不允许 tailwind 工作，但我的实际项目正在使用 tailwind。我知道他们刚刚更新了库以包含一堆伪类，但我读过的内容在这种情况下没有任何帮助。

标签： cssuser-interfacedrag-and-droptailwind-csspseudo-element