Css :after and :before pseudo element not working properly in IOS

Question

I am trying to dash after border in H tag using :after and :before it's working fine on desktop & android devices but create issue in IOS devices border made using :after and :before but text of h element doesn't display

below is a demo of other devices

below is a demo of IOS devices

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>

Can anyone help with this Thanks in advance

Answer 1

You don't need to pseudo element for that. Can be made easily with only background.

h2.service-heading {
  font-size: 36px;
  color: #762d2f;
  text-transform: uppercase;
  display: table;
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100% - 36px);
  padding-right: 15px;
  background: linear-gradient(#762d2f, #762d2f)  0 100% / calc(100% - 15px) 6px no-repeat,
              linear-gradient(#762d2f, #762d2f) 100% 100% / 10px 6px no-repeat;
}

<h2 class="service-heading" align="center"> Our Services</h2>

Also can be used some CSS variables to control everything easily.

h2.service-heading {
  --border-height: 6px;
  --second-border-width: 20px;
  --border-gap: 10px;
  font-size: 36px;
  color: #762d2f;
  text-transform: uppercase;
  display: table;
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100% - 36px);
  padding-bottom: 5px; /* bottom distance of border */
  padding-right: calc(var(--second-border-width) + var(--border-gap));
  background: linear-gradient(#762d2f, #762d2f)  0 100% / calc(100% - (var(--second-border-width) + var(--border-gap))) var(--border-height) no-repeat,
              linear-gradient(#762d2f, #762d2f) 100% 100% / var(--second-border-width) var(--border-height) no-repeat;
}

<h2 class="service-heading" align="center"> Our Services</h2>

Answer 2

I had the similar problem: dropdown-arrow for menu item performed as pseudoclass ::after didn't work for IOS. enter image description here

Next code snippet I utilized for SASS:

.nav-link {
      border-top: 1px solid var(--color-white);
      color: var(--color-white);
      font-size: 18px;
      line-height: 22px;
      font-weight: 400;
      text-decoration: none;
      padding: 10px 15px 10px 0;

      &::after {
        content: " ";
        border: none;
        background-image: var(--arrow-down);
        background-position: center center;
        background-repeat: no-repeat;
        width: 40px;
        height: 20px;
      }
  }

so the solution was to remove arrows from pseudoclass ::after and perform it as a background image for menu item, like next:

.nav-link {
      display: block;
      border-top: 1px solid var(--color-white);
      color: var(--color-white);
      font-size: 18px;
      line-height: 22px;
      font-weight: 400;
      text-decoration: none;
      padding: 10px 15px 10px 0;
      background-image: var(--arrow-down);
      background-position: 98%;
      background-repeat: no-repeat;
      background: var(--arrow-down) no-repeat 98%;

      &::after {
        display: none;
      }
}

I've noticed that IOS14.4 and lower doesn't support background-image, and older versions IOS are needed only full form background not just background-image:

background: var(--arrow-down) no-repeat 98%;