Needing to add spacing on all page anchor links

[m_hutchins]

Hello,

 

I'm in need to alter the "landing"/on click position of all the sites page anchor links (<a name="name-here">). I have a sticky menu that cover the titles of the section being linked to. I was initially trying to style the "a name" but I'm not sure it that's possible.

 

So, if I were to have:

 

<a name="page-title"></a>

<h2>Title of Section Ect.</h2>

<p>Information about this sections and da, da, da....</p>

 

 

<a name="page-title2"></a>

<h2>Another Title of Section Ect.</h2>

<p>Some more Information about this sections and da, da, da....</p>

 

I'm wondering if I can do something in CSS to cover all "name." I'm able to add spacing to the top/before using:

 

a[name]:before {
content:"";
display:block;
margin-top: 75px;
}

 

...but then I'm just adding a fat gap before each section and it looks bad.

 

I can't go through and add an id and/class to all these links, it's just not possible at this point.

 

Hope this makes sense.

 

Any help and/or suggestions are greatly welcome.

 

Thanks in advance!

m@

Edited September 29, 2016 by m_hutchins

[m_hutchins]

I found this solution and it seems to do the trick as far as I can see:

 

a[name] {
padding-top: 110px;
margin-top: -110px;
display: block;
}

[davej]

I have no idea what you are trying to do. Why are you using names on anchor tags? See...

 

http://www.w3schools.com/HTML/html_links.asp

[dsonesuk]

You risk targeting anchor elements with a name attribute in future, if the name attribute value start with 'page-title' as in name="page-title" or name="page-title2" then you could use a[name^=page-title], else give them a specific class name to target more specifically to prevent such problems totally.