I have a situation in which I have a container with two lines of text in right-aligned. Only one of the lines has the letter-spacing: 15px;
property to increase the spacing between the characters.
The problem is that letter-spacing
increases space only to the right, so the text is not correctly aligned on the right, leaving an empty space on the right between the end of the text and the container.
I know that putting a margin-right
negative on the same value as letter-spacing
I fixed this. But I have text of various sizes with letter-spacing
of various sizes and I do not want to always have to repeat a margin-right
for every letter
different.
Is there any way to automate this without always having to repeat the negative value in margin-right
?
Is there any way to use CSS Variables
to automate this? Type if my letter-spacing
is X
how to automatically pass this value to my margin-right
?
p + p {
letter-spacing: 15px;
}
p {
color: orangered;
text-align: right;
font-size: 30px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
text-transform: uppercase;
}
.box {
width: 500px;
border: 1px solid;
}
<div class="box">
<p>Titlem</p>
<p>taglinem</p>
</div>