How do you style an HTML middot?

Question

So, in my HTML, I'm putting 3 middots (dots that are vertically centered)

· · ·

and I want to style them. I want to make them larger. I also want to make the first dot white and put a blue circular outline around it, while making the other two dots gray.

Any idea if that's possible and if yes, how to go about it?

Answer 1

To make them larger, just use the font-size property in combination with line-height. To only style the first dot, you need to wrap it into a <span> and style it separately. The blue border can be achieved by using the text-shadow property:

div {
  font-size: 5em;
  line-height: .4em;
  color: gray;
}

div>span {
  text-shadow: 0px 0px 4px blue;
  color: white;
}

<div><span>&middot;</span>&middot;&middot;</div>

You can even make the outline bolder, if you use 4 text shadows in 4 different directions:

text-shadow:
  -1px -1px 0 blue,
  1px -1px 0 blue,
  -1px 1px 0 blue,
  1px 1px 0 blue;

div {
  font-size: 5em;
  line-height: .4em;
  color: gray;
}

div>span {
  text-shadow: -1px -1px 0 blue, 1px -1px 0 blue, -1px 1px 0 blue, 1px 1px 0 blue;
  color: white;
}

<div><span>&middot;</span>&middot;&middot;</div>