Question

嗨，大家好我试图制作一个花哨的样式边框，突出一个文本块，它基本上只是两条相交的尖锐线条（也会让它们有一个微妙的动画脉冲，这是微妙的，这是我到目前为止的代码：

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

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

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

Answer 1

绝对定位的元素不会占用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;
}

Answer 2

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

.fancyTop, .fancyRight { position: relative; }

我相信你会得到你正在寻找的结果。绝对定位的元素相对于其内部的容器定位，只要该容器具有与其相关的位置。

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

您可能会遇到与您提供的代码相关的其他问题，例如span标记是内联标记。我为你准备了一个小提琴作为例子：https://jsfiddle.net/stgermaniac/p3d0a1ez/

CSS如何制作不会移动页面的伪元素

2 个答案: