Replace or add code to HTML with CSS

Question

It's a challenge and not sure if that's even possible but here is my problem:

I don't have full access to the website. The only what I can do is to edit my external css.

Menu code:

<ul id="navPrimary" class="nav">
    <li id="navLink1"><a href="#">Link1</a></li>
 </ul>

I want to add this as first position on the list:

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

I can ask system administrator to add link to Home but his code will look like this:

<li id="navHome"><a href="/">Home</a></li>

So there still will be the problem with replacing text Home with my <i class="icon-home"></i>.

The only thing which comes up to my mind regarding CSS is :before, :after and content but not quite sure how exactly to use it. As 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 this added only html code as text.

google is your friend smashingmagazine.com/2011/07/13/…

Huangism
– Huangism

2015-04-22 17:20:55 +00:00
Commented Apr 22, 2015 at 17:20 — Huangism
– Huangism, Commented Apr 22, 2015 at 17:20
HTML in content attribute doesn't work.

jerrylow
– jerrylow

2015-04-22 17:33:49 +00:00
Commented Apr 22, 2015 at 17:33 — jerrylow
– jerrylow, Commented Apr 22, 2015 at 17:33

Nilesh Mahajan · Accepted Answer · 2015-04-22 17:21:13Z

2

by using :before and :after you can add content to your HTML document. even you can add a icon too.

for eg

#navHome:before {
  content:'';
  display:block;
  float:left;
  width:20px;  /* this must be the icon width*/
  height:20px; /* this must be the icon height*/
  background: url(icon.png) 0 0  not-repeat;
}

answered Apr 22, 2015 at 17:21

Nilesh Mahajan

3,51623 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jerrylow Over a year ago

This works visually but, he needs the link to go home.

Huangism Over a year ago

As the OP mentioned "I can ask system administrator to add link to Home but his code will look like this:" The only issue is the icon which can be done with css

jerrylow Over a year ago

Ah @Huangism thanks, in that case then there's no need for pseudo elements.

Huangism Over a year ago

Yes this can be done with just the anchor itself but I think this answer is still good since the OP asked for before and after

jerrylow · Accepted Answer · 2015-04-22 17:33:24Z

1

If you want to do so without using pseudo elements you can just hide the link text and add the icon as a background. To remove the text you do

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

Then add the background as an image, sample:

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

This still requires the admin to add the link in for you.

answered Apr 22, 2015 at 17:33

jerrylow

2,6391 gold badge17 silver badges26 bronze badges

1 Comment

Solver Over a year ago

This it the only available solution. Working perfect.

Collectives™ on Stack Overflow

Replace or add code to HTML with CSS

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related