元素的margin-top和margin-bottom的选择器

Question

我想要有不同之处：将光标悬停在元素中，让我们说元素上的指针，n-resize为margin-top，s-resize为margin底部。我知道我可以在span元素之前和之后创建一个不同的div来拥有选择器。问题是，树HTML是从JS库（fancytree，树库）自动生成的，我担心如果我在span之前和之后手动插入另一个元素，功能就会中断。任何帮助表示赞赏。

以下是解释情况的图片。

这是其中一条评论建议的我的LESS代码，它不起作用。

span.fancytree-node {
    /* See #117 */
    display: inherit; // #117, resolves to 'display: list-item;' for standard trees
    width: 100%;
    margin-top: @fancy-node-v-spacing;
    margin-bottom: @fancy-node-v-bottom-spacing;
    min-height: @fancy-line-height;
    cursor: pointer;
    :before {
        cursor: n-resize;
    }
    :after {
        cursor: s-resize;
    }
}

为了更清楚，我需要边距，我不能在元素的上方和下方添加另一个元素，因为我的JS库使用该边距来检测拖放位置。

Answer 1

• 制作:before和:after伪元素position: relative
的父代
• 制作两个伪元素position: absolute并使用top / right / bottom和left定位。
  • 同时使用left和right会在父级的左右边缘之间拉伸元素。
• 使用等于边距值的负top或bottom值，以便将伪元素放置在其父元素的边距上。他们的身高也一样。

实施例

  

注意：伪元素可能会干扰JS的拖放。我们无法用可以从问题中重新创建的内容进行测试。可能有一个更好的解决方案，包括用JS更改指针。

＆＃13;

＆＃13;

div {
  margin-top: 10px;
  margin-bottom: 10px;
  min-height: 20px;
  cursor: pointer;
  position: relative;
  background: pink;
}
div:before,
div:after {
  cursor: n-resize;
  content: '';/*Needed to show the pseudo-elements*/
  position: absolute;
  top: -10px;/*Same as margin*/
  left: 0;
  right: 0;
  height: 10px;/*Same as margin*/
}
div:after {
  cursor: s-resize;
  top: initial;
  bottom: -10px;/*Same as margin*/
}

＆＃13;

<div>Item</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

诀窍是将:before伪元素相对于其父容器定位。像这样：

div.box {
    position: relative;
    display: block;
    margin-top: 50px;

}
div.box:before {
    content:"";
    position: absolute;
    top: -50px; //LOOK HERE
    left: 0;
    width: 100%;
    height: 50px;
    cursor: n-resize;
    background:red;
}