Debugging CSS

from novice to ninja ;-)

Recently I had the task to create an info icon in a circle with pure css.

My first attempt, with a little help from the internet, gives me the following solution:

<span class="info--icon"></span>

.info--icon {
  position: relative;
  display: inline-block;
  border: 1px solid black;
  background-color: white;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.info--icon:after {
  content: 'i';
  position: relative;
  top: 1px;
}

It seems to work as expected ;-)

But using the icon in a different context results to the following :-(

What have I done wrong? How is it possible to find the problem?

Because the CSS and the HTML was identical, it could only depend on the context, where it was embedded.

So I checked the computed result styling with the Chrome developer tools. But in both cases it shows the same styles:

Computed styles for the pseudo class after.

But did you notice the checkbox in the right, to show all computed styles? Let’s check this. Uh, that’s a ton — see the scrollbar.

All computed styles for the pseudo class after.

How should I compare this efficiently?

What about file comparison using i.e. notepad++ adding the Compare plugin? Let’s try.

So I copied both computed styles into different text files and compare them side by side. And half the way down, I found the problem: text-align.

So adding the text-align style with the value center to the span solves my problem.

Comments and suggestions are welcome.