使用CSS将内容放置在锚定标记之外

我使用了

：before

，并在锚定标记之前使用CSS

content

属性添加了一些内容。 我想将此内容放置在锚定标记之上，但在锚定标记上应用填充时，在定位方面面临一些问题。请检查jsbin演示以使事情清楚

这是我的CSS代码

ul {
  margin-top:200px;
  list-style-type: none;
}

li {
  height: 100px;
}

a {
  outline: 4px solid skyblue;
}

a:before {
  content: "top place";
  background-color: blue;
  color: white;
  padding: 5px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  font-size: 14px;
  
  /* To move it to top of anchor element*/
  position: absolute;
  margin-top: -30px;
  margin-left: -4px;
}

.b {
  padding: 40px;
}

---

如果您想让

：：在

伪元素位于上边框之前，向左齐平，我建议：

a {
    outline: 4px solid skyblue;
    position: relative;
}

a:before {
    /* Everything else as before, unchanged */
    position: absolute;
    bottom: 100%;
    left: -4px;
}

---

.

如果您的意思是希望

：：在

伪元素位于上边框之前，向左侧齐平，我建议：

a {
    outline: 4px solid skyblue;
    position: relative;
}

a:before {
    /* Everything else as before, unchanged */
    position: absolute;
    bottom: 100%;
    left: -4px;
}

.

你是说像这样

绝对定位是使用

顶部、左侧、右侧和底部

而不是

边距

a {
    position: relative;
    outline: 4px solid skyblue;
}

a:before {
    ...

    /* To move it to top of anchor element*/
    position: absolute;
    top: -30px;
    left: -4px;
}

将

position:relative

添加到

a

，因为它是

a:before

的父元素，

a:before

的

绝对

位置将是相对于

a

的，你的意思是这样的

绝对定位是使用

顶部、左侧、右侧和底部

而不是

边距

a {
    position: relative;
    outline: 4px solid skyblue;
}

a:before {
    ...

    /* To move it to top of anchor element*/
    position: absolute;
    top: -30px;
    left: -4px;
}

---

将

position:relative

添加到

a

，因为它是

a:before

的父元素，

a:before

的

绝对

位置将相对于

a

您只需删除

填充：40px在
b
课堂上，你可以在外面得到它。这就是你想要的吗？删除填充不是一个好的解决方案，因为它会弄乱页面布局在
b
课堂上，你可以在外面得到它。这就是你想要的吗？删除填充不是一个好的解决方案，因为它会弄乱页面布局。我只想在用户根据我的UI按下按钮时，将内容放在内容之前。我怀疑在锚标签上做position:relative是否会弄乱页面布局。它可能会。有没有办法，我可以直接将before内容拖到外面，而不必触摸A的属性？当用户再次按下它时，在内容消失之前。我已经成功地实施了它。我只是无法将此内容正确地放置在边界上。您能否一步一步地解释用户应该做什么以及应该发生什么？这可能在HTML/CSS中实现，但可能需要JavaScript；但我还不确定你到底想要什么。我不知道大卫的解决方案或我的解决方案有什么问题。设置
position:relative
不一定会更改页面布局。我认为除了使用不必要的JavaScript之外，没有其他方法可以解决这个问题。@DavidThomas页面上有一个按钮，用户可以使用该按钮突出显示所有锚定标记，因此假设在我的页面中，有一个锚定标签已经绝对定位，现在用户点击按钮，我们在锚定标签上设置相对位置，这将覆盖现有的绝对属性。所以我怀疑它可能会把事情搞砸。我清楚了吗？我只想在用户根据我的UI按下按钮时才将内容放在内容之前。我怀疑在锚标签上做position:relative是否会弄乱页面布局。它可能会。有没有办法，我可以直接将before内容拖到外面，而不必触摸A的属性？当用户再次按下它时，在内容消失之前。我已经成功地实施了它。我只是无法将此内容正确地放置在边界上。您能否一步一步地解释用户应该做什么以及应该发生什么？这可能在HTML/CSS中实现，但可能需要JavaScript；但我还不确定你到底想要什么。我不知道大卫的解决方案或我的解决方案有什么问题。设置
position:relative
不一定会更改页面布局。我认为除了使用不必要的JavaScript之外，没有其他方法可以解决这个问题。@DavidThomas页面上有一个按钮，用户可以使用该按钮突出显示所有锚定标记，因此假设在我的页面中，有一个锚定标签已经绝对定位，现在用户点击按钮，我们在锚定标签上设置相对位置，这将覆盖现有的绝对属性。所以我怀疑它可能会把事情搞砸。我明白了吗？