Adding dot below current date in react datepicker using CSS

Question

I want to add 1 small circle / filled dot below today date number, e.g if today is 1st of march then in the datepicker below the number 1 there should be a dot on the datepicker.

I have tried adding css styling like,

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

To the code below where the comments are but what happens is the number itself in the datepicker gets distored and moved around, or the blue circles appears ontop of the number with the number itself appearing on the bottom of the datepicker instead of its cell

.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%;

        }

That fixed it for me ! Be sure to set parent component positioning to relative