0

我在锚标记之前使用:before并添加了一些使用 CSS 属性的内容。content我想将此内容放在锚标签上方，但在锚标签上应用填充时会遇到一些定位问题。请检查 jsbin 演示以使事情清楚。

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

2 回答 2

3

如果您的意思是您希望::before伪元素位于顶部边框上，与左侧齐平，我建议：

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

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

JS 小提琴演示。

于 2013-06-25T06:29:54.507 回答
0

你的意思是这样吗？JS斌

使用top, left, right and bottomnot完成绝对定位margin

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并且 的absolute位置a:before将相对于a

于 2013-06-25T06:30:18.330 回答