如何在开始和结束时创建带有圆形的线条小部件？

Posted 2023-03-21

【中文标题】如何在开始和结束时创建带有圆形的线条小部件？

【英文标题】：How do I create a line widget with rounds in its start and end?

【发布时间】：2022-01-19 16:59:58

【问题描述】：

我一直在这里和谷歌上寻找解决方案，但没有成功。

我想创建一条末端有点的水平线。

This is an example:

如何使用 css 实现这一点？

我确实尝试过做点什么，但我没有走多远

.VecBox 
  background: #FFFFFF;
  mix-blend-mode: normal;
  box-shadow: 0px -3px 15px 5px rgba(65, 65, 65, 0.07);
  border-radius: 20px;
  padding-top: 20px;
  padding-left: 10px;
  padding-bottom: 20px;


.pickDate 
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  font-variant: small-caps;
  color: #2F312F;


.pickTm 
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  font-variant: small-caps;
  color: #2F312F;

<div class="VecBox">
  <div class="row">
    <div class="col-6 w-100 text-left LocationAB pl-5">chembumukku</div>
    <div class="col-6 w-100 text-right LocationAB pr-5">alappuzha</div>
  </div>
</div>

<div class="VecBox mt-4">
  <div class="row">
    <div class="col-6">
      <div class="w-100 pl-2 pickDate text-left">07 December 2021</div>
      <div class="w-100 pl-2 pickTm mt-2 text-left">04 : 15 PM</div>
    </div>
    <div class="col-6">
      <div class="w-100 pr-2 pickDate text-right">07 December 2021</div>
      <div class="w-100 pr-2 pickTm mt-2 text-right">04 : 15 PM</div>
    </div>
    <div class="col-12 text-center pickDis">
      2 days and 22 hours
    </div>
  </div>
</div>

【参考方案1】：

您可以尝试对线条使用<hr> 元素（水平规则）。然后，您可以在开头和结尾处为圆圈添加pseudo elements。 Pseudo-elements 非常适合在元素前后添加样式而不添加不必要的标记。它可以用于：

为元素的第一个字母或行设置样式。 在元素内容之前或之后插入内容

查看W3 schools explanation 以获取::before 和::after

hr 
  width: 50%;
  border: dotted red 1px;


hr::before 
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  display: inline-block;
  position: absolute;
  left: 25%;
  margin-top: -5px;


hr::after 
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  display: inline-block;
  position: absolute;
  right: 25%;
  margin-top: -5px;


div 
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  display: inline-block;
  position: absolute;
  right: 50%;
  margin-top: 4px;
  outline: solid red 1px;
  outline-offset: 5px;


* 
  box-sizing: border-box;

<br>
<div></div>
<hr>

【讨论】：

但我仍然不明白如何在中心创建一个圆圈