2

I want to insert an html element after all my li s. For example: Html:

<ul>
 <li>some text</li>
 <li>some text</li>
 <li>some text</li>
</ul>

Css:

li:after{
  content:"<div class="someclass"></div>";
}

but it doesn't work

Bishoy Essam
  • 85
  • 7
  • 1
    content inserts textnode contents. you can't have it change the DOM structure. CSS's job is for styling. it's not there to modify the physical structure of things. – Marc B Sep 04 '15 at 20:19
  • You need javascript for this, can't do it with CSS. – dfsq Sep 04 '15 at 20:21

2 Answers2

1

Unfortunately, you can't do that with CSS. But it's possible in JavaScript, for instance with jQuery .append(); method.

// Add Baz to .myList
$( ".myList" ).append($("<li>Baz</li>"));
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="myList">
  <li>Foo</li>
  <li>Bar</li>
</ul>
Community
  • 1
  • 1
Nicolapps
  • 559
  • 6
  • 24
0

If you need to show some graphic element after each li element the option is to use an url in the content property:

content: url(/pictures/logo.gif);
Vado
  • 134
  • 7