Title customization

Hello.
I would like to beautify my titles with a CSS class. I want to add a small brown square immediately after the last letter of each title.
I am not able to achieve this. I tried the following attempt, but the square is positioned at the right side of the line.

.title {
position: relative;
display: inline-block;
}

.title::after {
content: "\25A0";
color: brown;
font-size: 1em;
position: absolute;
right: -1.2em;
top: 0;
}

Can someone help me?
Thank you in advance.

Nuno