html - 在段落旁边画圆线的最简单方法是什么？

我想在我的文本旁边有一条竖线。我可以用“border left”在左边画一条垂直线，但我还没有找到如何绕过它的角。下图显示了应该如何操作：

最佳答案

使用绝对定位的伪元素来实现相同的目的。在下面的例子中，我使用的是::before绝对定位并设置为父对象的全高（使用top: 0; bottom: 0;技巧）。然后，您可以简单地设置一个宽度，并使用一个border-radius宽度的一半来实现圆角。

p {
  position: relative; /* Required so that pseudo-element is positioned correctly */
  padding-left: 30px; /* Dummy value to make space for pseudo-element */
}

p::before {
  /* Create pseudo-element and give it content */
  content: '';
  display: block;

  /* Position it in its parent so that it is:
   * - to the left
   * - occupies full height
   */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;

  /* Give it a fixed width and rounded corners */
  width: 10px;
  border-radius: 5px;

  /* Appearance */
  background-color: steelblue;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin metus tincidunt felis maximus, maximus sollicitudin mi ultrices. Curabitur libero arcu, bibendum ac suscipit ut, elementum scelerisque lacus. Praesent ultricies commodo porttitor. Fusce eget velit nisi. Praesent vulputate venenatis dui, efficitur sollicitudin nisi pulvinar a.</p>

关于html - 在段落旁边画圆线的最简单方法是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45689007/