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

Question

我想在我的文本旁边有一条垂直线。我可以只使用“border-left”在左边画一条垂直线，但我还没有找到如何圆 Angular 。下图显示了它应该如何:

Answer 1

使用绝对定位的伪元素来达到同样的目的。在下面的示例中，我使用了绝对定位并设置为父级的完整高度的 ::before(使用 top: 0; bottom: 0; 技巧).然后，您可以简单地设置宽度并使用宽度的一半的 border-radius 来实现圆 Angular 。

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>