Css :after 和 :before 伪元素在 IOS 中无法正常工作答案

【问题标题】：Css :after and :before pseudo element not working properly in IOSCss :after 和 :before 伪元素在 IOS 中无法正常工作
【发布时间】：2021-03-30 08:26:47
【问题描述】：

我正在尝试使用:after 和:before 在 H 标记中的边框后冲刺，它在桌面和 Android 设备上运行良好，但在 IOS 设备中产生问题使用 :after 和 :before 制作的边框，但 h 元素的文本不显示

下面是其他设备的演示

下面是IOS设备的demo

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
}

&lt;h2 class="service-heading" align="center"&gt; Our Services&lt;/h2&gt;

谁能帮忙提前致谢

【问题讨论】：

您的 sn-p 在我的 iPad (IOS 14.4) 上运行良好，我在给定的代码中看不到任何对 IOS 有问题的内容。您能否检查给定的 sn-p 是否对您不起作用，否则其他代码中可能存在其他具有此效果的内容。另外，你测试的是什么版本的IOS？

标签： html css pseudo-element

【解决方案1】：

您不需要为此使用伪元素。只需背景即可轻松制作。

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;
}

&lt;h2 class="service-heading" align="center"&gt; Our Services&lt;/h2&gt;

还可以使用一些 CSS 变量来轻松控制一切。

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;
}

&lt;h2 class="service-heading" align="center"&gt; Our Services&lt;/h2&gt;

【讨论】：