If you want to
align only '-' sign over 'a'
<p class="macron">M<span class="mc-word">a<span>cron</p>
.macron{ font-size: 60px; }
.mc-word:before{
display: block;
content: '';
height: 2px;
width: 10px;
background-color: #000;
position: absolute;
margin: 0 auto;
margin-top: -50px;
margin-left: 60px;
}
And for all the macron word, you can use HTML codes. i.e Ā
See the complete list
here[
^] and
W3C[
^]
-KR