¿Hay una mejor manera de replicar este código CSS?

Estoy buscando una mejor manera de replicar esto sin tener que usar \ A después de cada salto de línea. Se usará en github-pages, por lo que, según mi conocimiento, no puedo usar el lenguaje del lado del server.

Quiero tener un file por separado para poder retirar lists y ponerlas en diferentes páginas.

.list1:before { display: block; white-space: pre; content: "list1 text \A list1 text \A list1 text" ; } .list2:before { display: block; white-space: pre; content: "list2 text \A list2 text \A list2 text" ; } .list3:before { display: block; white-space: pre; content: "list3 text \A list3 text \A list3 text" ;} 
  <ul class=list1></ul> <ul class=list2></ul> <ul class=list3></ul> 

Deberías intentar usar nth-child como:

 .content div::before { display: block; white-space: pre; } .content div:nth-child(1)::before { content: "list1 text \A list1 text \A list1 text" ; } .content div:nth-child(2)::before { content: "list2 text \A list2 text \A list2 text" ; } .content div:nth-child(3)::before { content: "list3 text \A list3 text \A list3 text" ; } 
 <div class="content"> <div></div> <div></div> <div></div> </div> 

Almacenar su contenido en css no es realmente una práctica estándar. El uso de :before y el content generalmente se reservan para insert elementos visibles que contribuyen al estilo de la página (icons y charts) en lugar de contenido.

Creo que tienes dos opciones aquí

  1. mantén tu contenido en el html y muéstralo / escondelo con js.
  2. inserta dinámicamente tu contenido con js.

He proporcionado un ejemplo de la opción 2. Probablemente hay una mejor manera de js esto. Esto es bastante rápido y sucio. 🙂

También aquí hay un enlace con el que puedes jugar.

 var list1 = "<li>apples</li> <li>oranges</li> <li>pears</li>"; var list2 = "<li>cars</li> <li>trucks</li> <li>trains</li>"; var list3 = "<li>carrots</li> <li>corn</li> <li>onions</li>"; function InsertListContents(listNum) { var contents = ""; switch (listNum) { case 1: contents = list1; break; case 2: contents = list2; break; case 3: contents = list3; break; default: contents = "<li>sorry, no content found</li>"; } $('.list' + listNum).html(contents); } $(document).ready(function() { // make a decision on which list to show // This is random, you'll want write your own function to decide var listNum = Math.floor(Math.random() * 3) + 1; InsertListContents(listNum); // for demonstration purposes $('.list' + listNum).addClass("example"); }) 
 .example { color: blue; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <body> <button onclick='InsertListContents(1)'>1</button> <button onclick='InsertListContents(2)'>2</button> <button onclick='InsertListContents(3)'>3</button> <ul class='list1'></ul> <ul class='list2'></ul> <ul class='list3'></ul> <br> <br> <p class='example'>*blue content was inserted at random</p> </body>