用于模仿iOS / Android表格行的CSS

Question

我正在尝试创建一个跨越设备宽度的行，用户可以点按该行然后转到指定的链接。

我创建了一个图像，它是iOS中表行上的'披露指标'（雪佛龙）。我无法弄清楚如何在雪佛龙的左边设置我的多行文字，并将雪佛龙保持在文本的右侧并居中。 （见图）。

有什么想法吗？

由于

Answer 1

您可以使用transform垂直对齐人字形。

Fiddle

＆＃13;

＆＃13;

div {
  position: relative;
  border: 1px solid black;
  padding: 10px 40px 10px 10px;
}
div:after {
  content: '›';
  font-size: 40px;
  color: #444;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

＆＃13;

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

＆＃13;

＆＃13;

＆＃13;