样式文本使其显示在行上方(对于歌词上方的和弦)

Question

我希望能够使用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(我将使用overflow:visible)在内联跨度上工作.有没有人有办法解决吗？

编辑:谢谢@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>

Answer 1

这是使用data-*属性和:before伪类的变体

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/

Answer 2

是的,position: relative仍然保留所需的空间.

这是一个解决方案,包围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中测试过

Answer 3

对于内联元素，您可以使用display: inline-block;让它接受宽度。但对于你的问题，为什么不简单地添加呢left: 3px; /*em or whatever*/？它会缩进它。