使用 CSS 在反应日期选择器中的当前日期下方添加点

Question

我想在今天日期数字下方添加 1 个小圆圈/实心点，例如，如果今天是 3 月 1 日，那么在日期选择器中数字 1 下方应该有一个点。

我尝试添加 css 样式，例如

  transform: translateX(-50%);
  border-radius: 100%;
  position: absolute;
  background: blue;
  bottom: 2px;
  height: 2px;
  content: '';
  width: 2px;
  left: 50%;

下面的代码有注释，但发生的事情是日期选择器中的数字本身变形并四处移动，或者蓝色圆圈出现在数字的顶部，而数字本身出现在日期选择器的底部它的单元格

.DayPicker-Week {
        border-bottom: none;
        cursor: default;

        .DayPicker-Day {
            text-styles('normal');
            border-right: none;
            cursor: default;
            height: 32px;
            padding: spacing-NEW(0.5);
            width: 32px;

            &--disabled {
                color: red
            }

            .DayPicker-Day-NEW{
                display: table-cell;
                height: inherit;
                vertical-align: middle;
                width: inherit;
            }


            &--today:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside) .DayPicker-Day-NEW {
                // IF TODAYS DATE
                // ADD A DOT BELOW TODAYS DAY NUMBER
            }
        }
}

Answer 1

        &::before{
            transform: translateX(-50%);
            border-radius: 100%;
            position: absolute;
            background: rgb(44, 6, 211);
            content: '';
            height: 5px;
            width: 5px;
            left: 50%;

            bottom: 60%;

        }

帮我修好了！一定要设置父组件定位为relative

使用 CSS 在反应日期选择器中的当前日期下方添加点

Adding dot below current date in react datepicker using CSS

css

cell

css-shapes

react-datepicker