Replace or add code to HTML with CSS -


it's challenge , not sure if that's possible here problem:

i don't have full access website. can edit external css.

menu code:

<ul id="navprimary" class="nav">     <li id="navlink1"><a href="#">link1</a></li>  </ul> 

i want add first position on list:

<li id="navhome"><a href="/"><i class="icon-home"></i></a></li> 

i can ask system administrator add link home code this:

<li id="navhome"><a href="/">home</a></li> 

so there still problem replacing text home <i class="icon-home"></i>.

the thing comes mind regarding css :before, :after , content not quite sure how use it. before i've tried adding single word.

edit1

i have tired this:

#navlink1:before{ content:'<li id="navhome"><a href="/"><i class="icon-home"></i></a></li>'; }

but added html code text.

if want without using pseudo elements can hide link text , add icon background. remove text do

  display: inline-block; /* or block */   overflow: hidden;   text-indent: 100%;   white-space: nowrap; 

then add background image, sample:

http://codepen.io/anon/pen/voymoq

this still requires admin add link in you.


Comments

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -