伪元素格式不起作用

Question

I have this CSS:

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

The ::before pseudo-element has a border.

I intentionally specified border: none; to avoid this.

Answer 1

There is no border on the ::before . The issue is that your ::before -element is inside the sqrt -element.

Try this code:

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

It positions the ::before absolute to the sqrt -element, and moves the sqrt -element away from the ::before , therefore creating the desired effect.

Working JSFiddle