I am using th:after to display a border below a sticky thead within a table (since regularly putting a border on it doesn't work). It displays fine on Chrome/Brave, Firefox and Edge, but not Safari. Safari just doesn't show it.
th:after,
th:before {
content: "";
position: absolute;
left: 0;
width: 100%;
}
th:after {
bottom: 0;
border-bottom: 1px solid lightgray;
}
Chrome/Brave: How Chrome/Brave displays it
Safari: How Safari Displays it
I even tried playing around and adding a height and background-color to the :after pseudo element and while the other browsers would show it, Safari would not. It's like it completely ignores anything other than what I pass into content (which isn't useful to me as I don't want any content in the first place).
I tried using double colons with ::before and ::after in case that was it but that didn't help either.
Does anyone have any idea what I can do to make this behave in Safari?
I'm using Vue 3 and Tailwind (except for this and other custom CSS) in case that helps.