伪元素格式化不起作用

Question

我有这个CSS：

sqrt::before {
  border: none;
  content: "√";
}
sqrt {
  content: attr(expr);
  border-top: 1px solid black;
}

::before伪元素有边框。

我故意指定border: none;以避免这种情况。

Answer 1

::before没有边界。问题是你的::before元素在sqrt元素内。

试试这段代码：

sqrt::before {
  border: none;
  content: "√";
  position: absolute;
  left: 0;
}
sqrt {
  content: attr(expr);
  border-top: 1px solid black;
  margin-left:2px;
}

它将::before绝对定位到sqrt元素，并使sqrt元素远离::before，从而产生所需的效果。

Working JSFiddle