Freebie: One element map markers with CSS and HTML only

One element map markers with CSS and HTML example
In one of my work projects, I needed to create one element map markers with CSS and HTML only to pin locations on a map with dynamic text. Thought I would share with you how to create written in SCSS for ease of color changes and copy/paste.
Some requirements I needed for the markers:

  • Dynamic Text
  • Easily change color
  • Pin location flexible
  • One html element only

Full Code

See the Pen CSS Label with marker using one HTML element by Justin (@jstn) on CodePen.

Usage

To change colors, you can add .marker-red, .marker-green, .marker-blue and .marker-yellow. To change the position of the marker you can add .angeled-right, .angeled-left along with .top or .bottom to position the dot.

Justin Mathew

A front end web developer specializing in HTML/CSS, JS, PHP & MySQL with over 10 years experience in the web development field.