css - 如何在段落的左侧创建一条垂直线（带半径）？

Question

我对前端很陌生，所以有点挣扎。我正在尝试创建类似这张照片的东西：

像这样的东西

1. 创建一条与右侧内容高度相同的垂直线。
2. 将半径添加到该线。不知道这是否可行？

- 谢谢！

标签： css

Answer 1

使用伪元素

*{
  margin:0;
  padding:0;
  
}
p{
font-size:30px;
  position:relative;
    padding: 0 20px;
  margin: 20px 0px;
}

p::after{
  content:"";
  width:5px;
  height:100%;
  border-radius: 50px;
  background-color:blue;
  position:absolute;
  left:10px;
  top:0;
}

<p>hello<br>hello<br>hello<br>hello<br></p>