如何在css中创建圆点？

Question

我有一个禁用日期的日历，我希望禁用日期之一包含一个小点。

这里是可视化外观

这是html：

   <p-calendar [inline]="true" [disabledDates]="restrictedBookingDates" [minDate]="minimumDate" tabindex="0"
          readonlyInput="true">
            <ng-template pTemplate="date" let-date>
                <span  class="dot" [ngStyle]="{backgroundColor: (date.day ==19) ? '#348db2' : 'inherit'}"   
                >{{date.day}}</span>
            </ng-template>
        </p-calendar>

到目前为止，这是我的CSS：

.dot::after {
  content: '';
  background: #f00;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
}

  

更新

这是从日历返回的日期不正确的类：

<a class="ui-state-default ng-tns-c2-0 ui-state-disabled ng-star-inserted" draggable="false" href="#" ng-reflect-klass="ui-state-default" ng-reflect-ng-class="[object Object]" style="
    background:  red;
">
}--><div _ngcontent-c1="" class="dot ng-star-inserted" ng-reflect-ng-style="[object Object]" style="background-color: rgb(52, 141, 178);">19</div></a>

不幸的是，这不起作用，谷歌也无法提供帮助。所以被卡住了，

我的代码中缺少什么？任何帮助建议将不胜感激。

Answer 1

尝试一下：

.dot {
  width: 40px;
  height: 40px;
  margin-top: 10px;
  background-color: lightgray;

}

.ui-state-disabled::after {
  content: '';
  background: #f00;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  left: 10px;
  top: 10px;
  display: inline-block;
   
}

<div class="dot"></div>
<div class="dot"></div>
<div class="dot ui-state-disabled"></div>

如果您仅将一个类ui-state-disabled添加到所需的元素，它将起作用