Question

I’m curious to know how the popular CSS triangles are made using just borders. Here’s an example of the code:

#CLASS or ID name  #CLASS or ID name:after {
  border-color: transparent transparent #F3F3F3;
  border-style: solid; 
  border-width: 6px;  
  bottom: 0;  
  content: ""; 
  height: 0;
  left: 50%; 
  margin-bottom: -1px;
  margin-left: -6px; 
  margin-top: 0;
  position: absolute;
  width: 0;
}

Again, how is it exactly that this creates an up arrow? Additionally, I’m confused as to what content: "" does.

Answer 1

user1637741, you ask a very good question.

Firstly, let me begin by explaining the purpose of content:"";. You see, what we’re using here is a called a pseudo element. These are intended to add content to your page, like words or images. The triangle (or arrow) situation is a hack of sorts, in that we don’t actually want to add any new content to our page; instead, we simply want to draw a border for the element (which, yes, will ultimately give us a triangle). However, the pseudoelement’s content does more than specify what it contains. It also acts as the boolean to determine whether or not to display the element at all. In other words, if there’s no content, the thing won’t render. Luckily for us, simply passing an empty string is enough to make it display.

Okay, so now about that pesky border. How in the world does it make a triangle? In short, what we’re doing is drawing a border on a single edge of the element, then positioning the element such that we only see what appears to be a triangle.

Here, let me show you. Check out this JSFiddle. This isn’t anything too out of the ordinary. It’s just a div that is only displaying a bottom border. But, if you stare and it and think about it, imagine hiding most of that border so that what’s left is a triangle. If you removed all of it except one of the edges, we’d have a very little triangle left over. Can you see it?