Question

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

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

Answer 1

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

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

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

JS Fiddle demo

Answer 2

你是说这个意思吗？ JS Bin

使用top, left, right and bottom而不是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的{{1}}位置将相对{ {1}}

使用CSS放置在锚标记之外的内容之前

Check at JSBIN

2 个答案: