How can I get a top border tight to a font's glyphs?

Question

I have need in a project to show rules at the baseline, x-height, and cap height of several font samples. I have baseline and x-height taken care of, but am having trouble getting a general CSS rule that will draw a border at the cap height of any font I apply the rule to. I've fiddled with the line height, but the space between a font's glyphs and the top of its layout box differs from font to font, so setting it once won't work for any font.

This Code Pen example illustrates the issue: http://codepen.io/DrSpatula/pen/BAgqG

Answer 1

You are now applying the line-height to the p. If you remove it there, and apply the line-height to the span.text, and set it to a value of 1.55ex, it shows properly.

So your CSS will be:

    p {
      font-size: 72px;
      position: relative;
      margin: 0;
      padding: 0;
    }

    p span {
      margin: 0;
      padding: 0;
      display: inline-block;
    }

    .sans {
      font-family: sans-serif;
    }

    .text { 
      border-top: 1px solid blue;
      line-height: 1.55ex;
    }

    .rule {
      height: 1ex;
      border-top: 1px dotted red;
      border-bottom: 1px solid blue;
      position: relative;
      left: -7.25em;
      width: 7.75em;
      top: 1px;
    }