Insert a div that does not exist in html form sass/css

Question

I am working on a React Component in which I have a DatePicker (Calendar component from PrimeReact).

I want to add an arrow on top of the datepicker that pops up. Like in the image below

Below is a snippet in my form :

                    <div className='form-group col-md-4 calendar-group'>
                        <FontAwesomeIcon icon={faCalendarAlt} className='l-input-icon' />
                        <Calendar 
                            className='form-control'
                            dateFormat="dd/mm/yy" 
                            value={shippingDate? shippingDate.date:shippingDate} 
                            onChange={(e) => setShippingDate({date: e.value})}
                            placeholder='Shipping Date'
                            
                        />
                    </div>

Below is the span shot of the HTML dom when the component renders

The problem is since I am using the Calender component I add HTML elements inside that Calender's DOM.

Basically, I want to place a div (0 height and width, with thick bottom border to achieve an arrow) on top of .p-datepicker

So is it possible to add a HTML element (a div) from css without having it in the HTML doc? Or is there any other approach to achieve this?

REPLY TO anon's answer:

I can't add <div className='arrow'> since I can't inject it into the calender component.

I added the below code to the scss file:

.p-calendar{
    position: relative;
    .p-datepicker{
      margin-top: 16px;
      min-width: 270px;
      position: absolute;
      &:before {
        content: "";
        display: inline-block !important;
        width: 0;
        height: 0;
        border-bottom: 8px solid red;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        vertical-align: middle;
      }
    }
  }

now the the the date picker looks like this.

I tried adding position: absolute inside the pseudo element but it doesn't not work because I think datepicker itself is positioned as absolute.

Any idea what would fix this?

Answer 1

See example below using pseudo-elements.

.arrow:after {
  content: "";
  display: inline-block !important;
  width: 0;
  height: 0;
  border-bottom: 8px solid red;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.arrow{
  background: green;
  width:100%;
  position relative;
}

<div class="arrow">
   Some content
</div>