Need help with a piece of CSS I don't understand (anchor/fixed header)

HTML-CSS
1

So I was looking for a way to offset anchored piece of page so I doesn’t stay hidden behind the fixed header and I found this.

:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}

It works fine but I don’t really understand why and what it does.

I have some problems figuring out before and after selectors and why is content just “”. Why use both heigth and negative height, I tried without margin and I think it works fine.

Here’s a link for exercise I’m working on so you can see where I’ve use that piece of code.

Thanks for all the help

2

margin: -90px 0 0 just moves the thing up 90 pixels.
anything along the lines of :hover or :before is a pseudo class defining something that can happen to the thing. display block is the default display, often used with display none. Also, try wrapping your content in a div (on the same level as nav), as that might help the browser. Can’t talk now, will detail later.

1 Like
3

If the content property is not set the :before and :after pseudo-elements are not generated (specs). The reason for the empty string is just so no text shows up.

You can use text if that is what is needed. This would give all a elements the text "Link: " before them.

<a href="">Some text</a>

a::before {
  content: "Link: ";
}

More on some different techniques for the jump links and fixed headers.

1 Like
4

I think I get it now, it basically creates empty block of certain size and uses it to create offset starting point?

5

Yeah, it’s like a <br /> element. I honestly wish I didn’t have to preformat that, but I have to…