The blog ofJonathan Pepin

The Jon&Jess logotype in css

2019-02-18

While we were working on the Joe Schmoe website, Jess asked me if it was possible to have a red dot on the "j" of each Schmoe's name, like in our logo. "No. You'd have to export SVGs for each name", I replied.

Then I thought "There's probably a way". There is always a way with CSS. So I looked into it, because I hate saying no and I like doing little CSS hacks.

Using span and ::after you're able to create a circle and position it correctly. Depending on the font you are using, this might not scale to all letters perfectly, but I found this interesting enough to share it here, for our Js.

Ok, let's get in.

So, the exercise is to take our logotype, jonandjess and add a red and a blue dot on the Js, respectively.

Let's start with our HTML, using spans to mark our Js and see what we can do.

<span class="dot dot--blue">j</span>on&<span class="dot dot--red">j</span>ess

We'll be created the dots in CSS and absolute position them inside the spans, so we want to make sure those are relatively positioned, or else the absolute element inside will position itself relative to the outer ancestor (the first one with a css positioning set).

span.dot {
  position: relative;
}

Cool, now we can use the pseudo-element ::after to add some content and position it. We could also use ::before, they are the same, but in case case, since we'll be putting our dot on top of the content, it feels like ::after makes more sense as far as naming goes.

span.dot::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 0.25em;
  height: 0.25em;
  left: 0.05em;
  top: 0.15em;
}
span.dot--red::after {
  background-color: red;
}
span.dot--blue::after {
  background-color: blue;
}

And there you have it!

As you can see, no black magic here, the CSS is pretty basic.

The one thing to note is my usage of em for the size and positioning of the dots. It's not necessary, but since we are positioning the dots relative to the font, I like using em to have units proportional to the font's size. This way if we decide to double the font size, this will still work.

You can check it out live and play with it on codepen.