Position Position above text in a paragraph
I'm trying to put text over text like this (used in music):
Am E
This is a new sentence
G C
This is another sentence
but I don't want to use spaces!
I currently have this:
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>
This works, but only if I don't touch anything (font-size ...), because the bottom value is the same as the font size value.
I would like to have the same result, but without this limitation.
Can you help me?
source to share
Use top: -1em;
to move <span>
up in your own font size as EM refers to the current element 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>
To keep the correct vertical position when wrapping text, I would also suggest displaying the text in a pseudo-element that is positioned in relation to the text being wrapped span
rather than the paragraph itself.
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>
source to share