Adding Text Before List

Adding text before list

You need CSS counters:

#customlist {  /* delete default counter */  list-style-type: none;  /* create custom counter and set it to 0 */  counter-reset: elementcounter;}
#customlist>li:before {  /* print out "Element " followed by the current counter value */  content: "Element " counter(elementcounter) ": ";  /* increment counter */  counter-increment: elementcounter;}

<ol id="customlist">  <li>Elephant</li>  <li>Bird</li>  <li>Lion</li></ol>

How do I add text to every other item in a python list?

One way to do it would be this:

mylist = ["1", "2", "3", "4", "5"]
res = [x + ('a' if i%2 == 0 else '') for i, x in enumerate(mylist)]

which results in:

['1a', '2', '3a', '4', '5a']

---

This approach takes advantage of the fact that the index of the terms you want to change when divided by 2 have a remainder of 1. See modulo

Text before bullet in unordered list

Using :before pseudo here would restrict the use of different text. Wrapping the text which you need with some tag before the bullets will make it easier to give appropriate classes to it.

Check this JsFiddle for working example.

Add custom text to ordered list li

Thanks to Huangism for pointing me to Adding text before list, where I found my solution:

ol {  list-style-type: none;  counter-reset: elementcounter;  padding-left: 0;}
li:before {  content: "Step " counter(elementcounter) ". ";  counter-increment: elementcounter;  font-weight: bold;}

<ol>  <li>Place bag in freezer, etc...</li>  <li>Preheat oven</li></ol>

Add text before or after an HTML element

Yes, you can create a text node with document.createTextNode('the text')

Then you can insert it like an element, with appendChild or insertBefore.

Example that insert a text before #childDiv:

var text = document.createTextNode('the text');
var child = document.getElementById('childDiv');
child.parentNode.insertBefore(text, child);

How can I insert text before an item with CSS?

:before is a pseudo-selector itself, so it needs its own style block, like below:

project:before {
  content:"Projekt:";
}
project {
  display: block;
  margin-bottom: 30pt;
  margin-left: 0;
}

fiddle: http://jsfiddle.net/wNEt3/

fiddle using your xml and css: http://jsfiddle.net/pRwMT/1/

Btw, http://htmldog.com/ is a great place to go for HTML & CSS tutorials, and they kindly point out W3schools inconsistencies, if you've visited there first :D

How do I add text to each item in a list

I prefer string formatting:

foods = ['pie','apple','bread']

phrase = 'I like'

statement = ['{0} {1}'.format(phrase, j) for j in foods]

# Python 3.6+
statement = [f'{phrase} {j}' for j in foods]

Use Javascript to add a character after the text in a list element, but before an indented list and without spaces between the text and the addition

 //Get all LI which are immediate child of root UL
    let immediateLi = document.querySelectorAll('body > ul > li');

    //loop through the Li array and edit text node.
    for(let li of immediateLi) {
        li.childNodes[0].textContent = li.childNodes[0].textContent.trim() + ':'
    }

    //Important Note:
    //I have selected 0th child-node from the array because it is the default text-node containing our text. In case you are not sure if 0th child-node will hold the text content then you may filter the child-node array.

<ul>
    <li>Uno
      <ul>
             <li>One</li>
      </ul>
    </li>
    <li>Dos
      <ul>
             <li>Two</li>
      </ul>
    </li>
</ul>

How to append text interactively as a list item to a list in the HTML document without storing the list item as a javascript variable?

So I am just wondering how the compiler interprets an appendChild call of a text node to a document.createElement that hasn't been created yet...

It's not the compiler, it's the DOM. And the element has been created (you called createElement); what hasn't happened yet is that you haven't added it to the document, but that's fine, it's still an object, it can still have other objects attached to it.

and whether it's possible to append items to a list without storing them as variables first.

Yes, by using the return value of appendChild, which is the child element that was appended:

list.appendChild(document.createElement('li')).appendChild(document.createTextNode(s));

So there we:

1. Create the li element
2. Append it to the list
3. Use the return value of appending it (the li element) to append the text node

For example, this appends text between tags but not as list items:

var textnode = document.createTextNode(s)
var node = (document.createElement("li")).appendChild(textnode)
document.getElementById("sList").appendChild(node)

That's because you're appending the return value of appendChild to the list. The return value of appendChild is the child that was appended, not the element it was appended to. So node refers to the text node. After appending that node to the li, you then move it to the list on the last line above.

Insert text with css, indent rest of text like list

If you can wrap the pargraphs in a container then you can manage dynamic alignment using CSS Tables

div {  display: table border-collapse:separate;  border-spacing: 1em;}
p {  display: table-row;}
p::before {  display: table-cell;  padding-right: 1em;}
.one:before {  content: "Joe's\00A0task";}
.two:before {  content: "Michael's\00A0task";}
.third:before {  content: "Task";}

<div>  <p class="one">    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </p>  <p class="two">    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </p>  <p class="third">    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </p></div>

---

Related Topics