I’ve been trying to find a way to centrally position vertically an ::after pseudo-element that includes text (a content attribute).
Previous inquiries: I reviewed some previous inquiries on this topic, however, none of the solutions seem to apply to this uncomplicated situation.
The scenario involves a straightforward DIV that functions as a "next" button. It features a simple right arrow (Unicode 0x203A).
The markup is quite basic:
<div class = "next-button"></div>
And here's the CSS used:
.next-button {
position: absolute;
height: 70px;
line-height: 70px;
text-align: center;
background: black;
cursor: pointer;
}
.next-button::after {
content: "\203A";
color: white;
font-size: 3em;
line-height: 0;
}
JSFiddle demo link: https://jsfiddle.net/me6a3nq2/
Hence, I attempted various techniques for achieving vertical alignment. To start with, vertical-align:middle doesn't have any impact in this instance. Another approach would be to set the parent element's line-height equivalent to its height, but this too proved ineffective.
I experimented with including position:relative in next-button::after and then adjusting the top accordingly. However, without knowing the precise height of the arrow and due to variations across browsers, the arrow wouldn’t be centered accurately.
Furthermore, I tried using a conventional CSS method involving translateY, as described here. Generally, I've had success with this technique:
.next-button::after {
content: "\203A";
color: white;
font-size: 3em;
line-height: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Even so, this approach didn't work seamlessly with the pseudo-element. In Chrome, it appeared to shift the arrow off-centered towards the bottom:
https://i.sstatic.net/XyFX4.png
Furthermore, scrutinizing through the Chrome Inspector tool, I observed that the arrow itself (essentially a text character) appeared to have automatic padding above and below. This automatically added “padding” seemed larger above than below, thereby throwing off the vertical alignment of the arrow:
https://i.sstatic.net/ouagr.png
...however, I couldn't discern the cause of this padding or how to manipulate it. Initially, I presumed it might be related to line-height, hence I set line-height to 0, unfortunately to no avail.
So, my ideas are exhausted. I'm contemplating abandoning the usage of a pseudo-element and resorting to placing the arrow within a nested DIV instead.
Issue: Is there any viable means to vertically align a pseudo-element? (Additionally, what could be causing the unexpected padding above and below the text within the pseudo-element’s content?)