@xphstos
Posted
Hey there! Good job on this one! Regarding your question about the dollar sign.
If you have two inline
elements with different font-size
you can have them aligned (vertically) if both of them have the same line-height
and adjust the vertical-align
property of the shorter one. That's actually the "hard" or the "old" way if you prefer..
For example, we have this piece of html:
<p>
<span class="sign">$</span>
<span class="value">199.99</span>
</p>
We could have them aligned with this:
span {
line-height: 3rem;
}
span.sign {
vertical-align: top;
}
span.value {
font-size: 2rem;
}
Nowadays we have flexboxes to do that work for us. Again, for the same piece of code we could have the following css.
p {
display: flex;
align-items: center;
}
span.value {
font-size: 2rem;
}
This time we set the parent as a flex container and we align vertically all the children.
We could also have this by setting the parent element with a position: relative
and then set position: absolute
at the sign element. Now "just" need to vertically align it by giving it top: 50%
and transform: translateY(-50%)
. The issue now is that the sign falls over the our value.
We need to "know" the signs width and apply it as padding
in parent element or as margin
in our inner element that's right after our sign element.
As you can guess it's not the optimal way but an option nonetheless.
To be honest your solution is a very creative and modern approach! The only drawback it works only for one character, other than that I love it!!!
As for me, I choose the "old" way just because.. no particular reason. You can see my solution here.
Marked as helpful
@hejkeikei
Posted
@xphstos
Hi Chris,
Thanks for your thorough explanation! I really like that you put the dollar sign in ::before
. I trying to avoid separating the dollar sign and numbers because I'm not sure if the searching engine will treat them as a one thing or two elements. If it's totally fine to separate them I might use flexbox haha.
@xphstos
Posted
@hejkeikei I think you're on to something there, regarding SEO. Probably you're right, I'm not so sure about myself if search engines treat differently elements with currency symbols. Although I do know for sure they look the page's schema in meta tags. Your solution was great and I'll try it in my next project.