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.

notepad++ plug-in manager

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.