0

I came across the following which is pretty neat:

.TopBorderPanel {
  border-top: 2px solid #bbbb9f;
  position: relative;
}

.TopBorderPanel:after {
  position: absolute;
  left: 50%;
  right: 0;
  top: -2px;
  border-top: 2px solid #cccccc;
  content: '';
}

but I don't quite understand how it works. two questions: 1) why doesn't the left:50% extend the border? Is that being prevented by the right:0? and 2) why do we need to set content:''? ​

Ori Drori
  • 183,571
  • 29
  • 224
  • 209
DCR
  • 14,737
  • 12
  • 52
  • 115
  • 1
    your first question check here from the first duplicate: https://stackoverflow.com/a/29261683/8620333 and you second question the second duplicate – Temani Afif May 24 '20 at 22:32
  • thanks but I don't understand. While the references sited refer to both questions they don't seem to address the actual question being asked. Can you explain? (to be fair, the first question is probably answered but it's hard to follow what's being said. The second question about content isn't addressed at all in the context of the question I'm asking) – DCR May 24 '20 at 22:37
  • and what is the actual question? You asked 2 questions and I gave you a duplicate to understand each one – Temani Afif May 24 '20 at 22:38
  • when you know the answer it's easy but when you don't it's hard to follow you experts. If I remove the content attribute the border stays 1 color but the actual content stays the same. So why is content:'' just affecting the border? – DCR May 24 '20 at 22:41
  • reading the second duplicate to understand why content is mandatory for pseudo element – Temani Afif May 24 '20 at 22:42
  • Thank you. If I understand correctly the left:50 and right:0 determine the width and the default for content is none, which means the element won't be created so setting content:'' creates the element. Really pretty amazing. Is there a text or reference book you would recommend for this kind of stuff? Still don't quite understand then why the right half of the element still shows the content from the before – DCR May 24 '20 at 23:40
  • I don't have any particular reference to follow. You can find stuffs in SO, MDN pages, in a lot of articles in the net. I may gave you links if you have a particular and specific need but not in general. To better understand how left/right define the width simply adjust the values and see how it behaves. You will then udnerstand that left/right will set two points and the element is drawn from *left* to *right* – Temani Afif May 24 '20 at 23:47

0 Answers0