Стилизация текста, чтобы он казался над линией (для аккордов над лирикой)

Я бы хотел показать аккорды над лирикой в музыке с помощью CSS. Это то, что мне действительно понравилось бы:

C                                           F
This line has a C chord, and it also has an F chord

чтобы изменения аккордов были показаны в правильных местах. В HTML это выглядит так:

<span class="chord">C</span>This line has a C chord, and it also has an <span class="chord">F</span>F chord

И мне удалось почти получить эффект от этого стиля:

.chord {
  position: relative;
  top: -1em;
}

Но проблема в том, что он имеет пробелы:

C                                            F
 This line has a C chord, and it also has an  F chord

Если только ширина: 0 (я бы использовал с переполнением: видимый), работал на встроенном диапазоне. У кого-нибудь есть решение?

Изменить: Решено благодаря @Kyle Sevenoaks. Для всех, кто интересуется, вот мой полный CSS, который позволяет стихам отмечать <p>, аккорды, которые будут помечены <span>, и отображать ли аккорды для переключения с классом show-chords в родительском div:

p.song span {
  display: none;
}
p.song.show-chords p {
  line-height:2.3em;
  margin-bottom:2em;
}
p.song.show-chords span {
  position: relative;
  top: -1em;
  display:inline-block;
  width: 0;
  overflow:visible;
  text-shadow:#CCC -1px 1px;
  color:#00F;
  font-weight:bold;
  font-family:Arial, Helvetica, sans-serif;
}

<p class="song show-chords">
  <span class="chord">C</span>This line has a C chord, and it also has an <span class="chord">F</span>F chord
</p>

Ответ 1

Для встроенных элементов вы можете использовать display: inline-block;, чтобы он принял ширину. Но для вашей проблемы, почему бы просто не добавить left: 3px; /*em or whatever*/? Это будет отступать.

Ответ 2

Вот вариант с использованием атрибутов data-* и :before pseudoclass

HTML:

<span data-chord="C">T</span>his line has a C chord, and it 
also has an <span data-chord="F">F</span> chord

CSS:

span[data-chord]:before {
    position    : relative;
    top         : -1em;
    display     : inline-block;
    content     : attr(data-chord);
    width       : 0;
    font-style  : italic;
    font-weight : bold;
}

http://jsfiddle.net/fcalderan/4wKkp/

Ответ 3

Да, position: relative все еще сохраняет необходимое пространство.

Вот решение, которое обертывает span position: absolute вокруг относительно позиционированного, так что пространство больше не сохраняется:

 <span class="chord">
  <span class="inner">C</span>
 </span>This line has a C chord, and it also has an 
 <span class="chord">
  <span class="inner">F</span>
 </span>F chord

CSS

.chord { position: absolute
 }

.chord .inner {  position: relative;
    top: -1em;}

Преимущество перед подходом left заключается в том, что это будет работать для любой ширины аккорда (подумайте Esus или F7.

JSFiddle здесь. Протестировано в IE6,7,8, Chrome 6