我尝试在文本上方放置一些文本,如下所示(在音乐中使用):
Am E
This is a new sentence
G C
This is another sentence
但我不想使用空格!
目前我有这个:
p {
position: relative;
font-size: 50px;
}
span {
position: absolute;
bottom: 50px;
color: red;
font-size: 20px;
}
<div>
<p>Test test test <span>Em</span>test test</p>
<p>Test <span>Am</span>test test test test</p>
<p>Test test test test <span>Am</span>test</p>
<p><span>Am</span>Test test test test test</p>
</div>
这有效,但前提是我不触摸任何东西(字体大小...),因为底部值与字体大小值相同。
我希望得到相同的结果,但没有这种限制。
你能帮我吗!?
Use top: -1em;
移动<span>
其自身的字体大小,因为 EM 是相对于当前元素的font-size
:
p {
position: relative;
font-size: 50px;
}
span {
position: absolute;
top: -1em;
color: red;
font-size: 20px;
}
<div>
<p>Test test test <span>Em</span>test test</p>
<p>Test <span>Am</span>test test test test</p>
<p>Test test test test <span>Am</span>test</p>
<p><span>Am</span>Test test test test test</p>
</div>
为了在文本换行时保留正确的垂直位置,我还建议在伪元素中显示文本,该元素的位置与由span
,而不是段落本身。
p {
position: relative;
font-size: 100px;
}
span {
position: relative;
}
span::before {
position: absolute;
top: -0.5em;
color: red;
font-size: 0.4em;
content: attr(data-text);
}
<div>
<p>Test test test <span data-text="Em">test</span> test</p>
<p>Test <span data-text="Am">test</span> test test test</p>
<p>Test test test test <span data-text="Am">test</span></p>
<p><span data-text="Am">Test</span> test test test test</p>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)