I'm using google charts to display markers on the map. It only has simple circles. I want to use custom images and animations if possible.

<Chart
  width={'100vw'}
  height={'100vh'}
  chartType='GeoChart'
  data={[
    ['Lat', 'Long', 'Name'],
    [0, 0, 'test'],
  ]}
  options={{
    region: 'US',
    displayMode: 'markers',
    colorAxis: { colors: ['green', 'blue'] },
    resolution: 'provinces',
    defaultColor: '#555',
    backgroundColor: '#444',
    datalessRegionColor: '#f8bbd0',
  }}
/>

circle::before {
  content: '';
  background-image: url('../images/man.svg');
  position: absolute;
  color: blue;
  width: 70px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  right: 0;
  bottom: 0;
}

I don't really understand why it doesn't work. Is this something that can't be done with CSS?