Html 如何排列css:：before伪元素（如网格）

是否有一种方法，仅使用css来排列多行元素（在我的示例中是锚定元素），以便“before”位和“anchor”位并排显示，就像在网格中一样

即

---

一种方法是将

padding left

值添加到父锚点元素，然后是

显示：内联块

/

位置：相对

。然后相对于父元素绝对定位伪元素：

a{
位置：相对位置；
左侧填充：20px；
显示：内联块；
}
a:以前{
内容：“>”；
位置：绝对位置；
左：0；
}
div{
宽度：150px；
}

---

您可以像这样使用Flexbox，也可以垂直对齐项目

div {
  width: 150px;
}

a {
  display: flex;
  flex-direction: row;
  align-items: center;
}

a:before {
  content: ">";
  margin: 5px;
}

---

---

显示：表格/表格单元格

运行良好

a:：before{
内容：“>”；
右边填充：20px；
}
div{
宽度：150px；
边缘：1米；
边框：1px纯灰；
}
/*相关材料*/
a{
显示：表格；
文字装饰：无；
}
a:以前{
显示：表格单元格；
垂直对齐：中间对齐；
}

---

太棒了-谢谢。我尝试了table cell，但忽略了将display table放在父表上。学生错误！

div {
  width: 150px;
}

a {
  display: flex;
  flex-direction: row;
  align-items: center;
}

a:before {
  content: ">";
  margin: 5px;
}

<div>
   <a href="#">i am a test link which goes over multiple lines</a>
</div>