Struggling to make the border-dashing effect work on iOS devices using :after and :before. It's functioning properly on desktop and Android, but not displaying text on iOS.
Here is a demo of other devices:
https://i.sstatic.net/vj8sJ.png
And here is a demo of iOS devices:
https://i.sstatic.net/1vire.png
h2.service-heading {
font-size: 36px;
color: #762d2f;
text-transform: uppercase;
position: relative;
display: table;
margin-left: auto;
margin-right: auto;
max-width: calc(100% - 36px);
position: relative;
}
h2.service-heading::after {
content: '';
position: absolute;
width: calc(100% - 5px);
display: block;
height: 6px;
border-bottom: 6px solid #762d2f;
z-index: 9999;
clear: both;
left: 0;
bottom: 0px;
}
h2.service-heading::before {
content: '';
position: absolute;
width: 10px;
display: block;
height: 6px;
border-bottom: 6px solid #762d2f;
z-index: 9999;
clear: both;
bottom: 0px;
right: -10px
}<h2 class="service-heading" align="center"> Our Services</h2>If you have any insights on resolving this issue, I would greatly appreciate it. Thank you in advance!