Html CSS如何生成不带'；不要翻页

嗨，伙计们，我正在尝试制作一个花式的边框，这种边框可以突出显示一块文本，基本上只有两条相交的尖锐线条（也会使它们有一个缓慢的动画脉冲，微妙地引人注目，这是我到目前为止的代码：

span.fancyTop::before {
    position: relative;
    right: -50px;
    display: block;
    width: 80%;
    float: right;
    height: 1px;
    background: white;
    z-index: 2;
    content: "";
}

span.fancyRight::after {
    position: relative;
    right: -400px;
    top: -20px;
    display: block;
    content: "";
    float: right;
    z-index: 2;
    background: white;
    height: 200px;
    width: 1px;
    float: right;
} 

唯一的问题是它似乎在推动我的内容：

---

我想这样做，我可以让内容很好地适应线内，但它似乎把它向下推，我还需要它对移动的响应。我试图避免使用绝对定位，我希望能够使用可靠的类在任何地方，并有预期的结果。我不是一个前端设计师，以任何方式，所以任何帮助都会这太棒了。谢谢。

绝对定位元素不会占用DOM空间。因此您可以使用以下方法：

span.fancyTop::before {
  position: absolute;
  right: -50px;
  display: block;
  width: 80%;
  float: right;
  height: 1px;
  background: white;
  z-index: 2;
  content: "";
}
span.fancyRight::after {
  position: absolute;
  right: -400px;
  top: -20px;
  display: block;
  content: "";
  float: right;
  z-index: 2;
  background: white;
  height: 200px;
  width: 1px;
  float: right;
}

并确保相对定位父对象

span.fancyRight, span.fancyTop {
  position: relative;
}

---

绝对定位元素不会占用DOM空间。因此，您可以使用以下方法：

span.fancyTop::before {
  position: absolute;
  right: -50px;
  display: block;
  width: 80%;
  float: right;
  height: 1px;
  background: white;
  z-index: 2;
  content: "";
}
span.fancyRight::after {
  position: absolute;
  right: -400px;
  top: -20px;
  display: block;
  content: "";
  float: right;
  z-index: 2;
  background: white;
  height: 200px;
  width: 1px;
  float: right;
}

并确保相对定位父对象

span.fancyRight, span.fancyTop {
  position: relative;
}

---

如果将给定的定位更改为“绝对”，并添加：

.fancyTop, .fancyRight { position: relative; } 

我相信你会得到你想要的结果。绝对定位的元素是相对于它所在的容器定位的，只要该容器有一个与其相关联的位置

如果你想变得更花哨，只需将.fancyTop和.fancyRight更改为.fancy，并将：before和：after伪类添加到一个类中

---

您给出的代码可能会遇到一些其他问题，例如span标记是一个内联标记。我为您准备了一个提琴作为示例：

如果您将给定的位置更改为绝对，并添加：

.fancyTop, .fancyRight { position: relative; } 

我相信你会得到你想要的结果。绝对定位的元素是相对于它所在的容器定位的，只要该容器有一个与其相关联的位置

如果你想变得更花哨，只需将.fancyTop和.fancyRight更改为.fancy，并将：before和：after伪类添加到一个类中

---

您给出的代码可能会遇到其他一些问题，比如span标记是内联标记。我为您准备了一个提琴作为示例：

绝对定位伪元素…而不是相对定位伪元素。这确实是唯一的选择。否则它们会影响周围的元素。@Paulie\u D如果我滚动页面或其他内容，会发生什么情况。或者想在另一个元素上使用它，绝对位置不是关闭了吗？如果没有看到演示，很难评论。伪元素将绝对相对于父元素定位使用“容器”中的元素它还包含内容，并确保容器是position:relative，然后您可以对标记/行进行position:absolute，它们将是相对于容器的绝对值，而不是相对于页面的绝对值。@PraveenKumar yeah工作得很好。在标记答案之前必须等待一段时间。绝对定位伪元素…而不是相对。That是唯一的选择。否则它们会影响周围的元素。@Paulie_D那么如果我滚动页面或其他东西会发生什么情况。或者想在不同的元素上使用它，绝对位置不会关闭吗？如果没有演示，很难评论。伪元素的位置将绝对相对于父元素U将包含内容的“容器”中的元素重新定位，并确保容器是位置：相对的，然后您可以定位：绝对的标记/行，它们将是相对于容器的绝对位置，而不是相对于页面的绝对位置。@PraveenKumar yeah做得很好。在标记答案之前必须等待一个时间限制。