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

Question

我正在尝试使用 H 标记中的边框后破折号:after，:before它在桌面和 android 设备上运行良好，但在使用 :after 和 :before 制作的 IOS 设备边框中产生问题，但 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
}

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

任何人都可以帮助这个提前谢谢

标签： htmlcsspseudo-element

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

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

也可以使用一些 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;
}

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