Guión de estilo de lista de HTML

222

¿Hay alguna manera de crear un estilo de lista en HTML con un guión (es decir, o - –o - —) es decir

<ul>
  <li>abc</li>
</ul>

Salida:

- abc

Se me ocurrió hacer esto con algo así li:before { content: "-" };, aunque no conozco las desventajas de esa opción (y estaría muy obligado a recibir comentarios).

Más genéricamente, no me importaría saber cómo usar caracteres genéricos para los elementos de la lista.

html css xhtml html-lists Brian M. Hunt
fuente

79

Dado que el guión se usa comúnmente en las listas, ¿por qué no se incluye de forma predeterminada en CSS?

temirbek

101

Más importante aún, ¿por qué hay numeración armenia y katakana ... pero no guiones?

Henry C

108

Podría usar :beforey content:tener en cuenta que esto no es compatible con IE 7 o inferior. Si está de acuerdo con eso, entonces esta es su mejor solución. Consulte las tablas de compatibilidad de Can I Use o QuirksMode CSS para obtener todos los detalles.

Una solución un poco más desagradable que debería funcionar en los navegadores más antiguos es usar una imagen para la viñeta y simplemente hacer que la imagen parezca un guión. Consulte la página del W3Clist-style-image para ver ejemplos.

Darko Z
fuente

27

El problema :beforees que cuando los elementos de la lista abarcan varias líneas, la sangría en la segunda línea comienza donde está el guión, lo que arruina el efecto de la lista sangrada. Debe usar sangrías colgantes para evitar esto. Vea esto: alistapart.com/articles/taminglists

chiborg

3

Para poner mdash en contentusocontent: "\2014\a0"

Ivan Z

¡Vea la respuesta de @three, que es más genérica y menos detallada!

Ben Vertonghen

221

Hay una solución fácil (sangría de texto) para mantener el efecto de lista sangrado con la :beforepseudo clase.

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

Expandir fragmento

aron.lakatos
fuente

14

Funciona, pero no olvides poner list-style-type: none;el <ul>elemento.

toesslab

55

sin sangría soloul li:before{ content:"- ";}

Qlimax

44

Prefiero agregar display: block; float: left;al li:beforeque puede sacarlo más fácilmente del flujo de contenido, de lo contrario es bastante difícil / con errores conseguir que la primera y las siguientes líneas se alineen correctamente. O la respuesta de Keyan Zhang también lo hace con posicionamiento absoluto.

Simon East

8

bastante tonto que list-style-type dashya no es parte de CSS

Pixelomo

¿Cuál sería una solución solo HTML similar a la que usted propuso?

plutón

74

Aquí hay una versión sin posición relativa o absoluta y sin sangría de texto:

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

Disfrutar;)

velop
fuente

1

¡Excelente! Sugeriría 'ul.dash> li: before'. de lo contrario, los uls internos se estropean.

w.stoettinger

1

Prefiero agregar display: block; float: left;al li:beforeque puede sacarlo más fácilmente del flujo de contenido, de lo contrario es bastante difícil / con errores conseguir que la primera y las siguientes líneas se alineen correctamente. O la respuesta de Keyan Zhang también lo hace con posicionamiento absoluto.

Simon East

Lo uso como una .activeclase de navegación con li:before { visibility: hidden; }yli.active:before { visibility: visible; }

mostrar el

La mejor sugerencia imo!

Ben Vertonghen

64

Utilizar este:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

Jase
fuente

3

Desafortunadamente, no se respetan los colores del texto CSS.

Hereblur

77

La única solución posible para correos electrónicos

Oleg

No funciona para Gmail (noviembre de 2018) y Outlook 2016 ahora.

usuario2875289

33

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

violín de demostración

Keyan Zhang
fuente

25

Permítame agregar mi versión también, principalmente para que encuentre mi propia solución preferida nuevamente:

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}

<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>

Expandir fragmento

https://codepen.io/burningTyger/pen/dNzgrQ

Tres
fuente

En mi humilde opinión es la mejor solución hasta ahora. Gracias por compartir!

Axel

15

En mi caso, agregar este código a CSS

ul {
    list-style-type: '- ';
}

fue suficiente. Tan simple como es.

Albert Sosnowski
fuente

1

Asumiendo que esta es una adición relativamente nueva a CSS ya que no puedo encontrar otra respuesta que lo mencione, pero esta realmente debería ser la respuesta aceptada en estos días.

ahstro

44

Parece que esto solo se admite en Firefox de escritorio: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

dave

Esto ahora también es compatible con Chrome (a partir de 79 creo): chromestatus.com/feature/5893875400966144 y caniuse.com/#feat=mdn-css_properties_list-style-type_string

Alex

9

Una de las principales respuestas no funcionó para mí, porque, después de un poco de prueba y error, li: before también necesitaba la visualización de la regla css: inline-block.

Entonces esta es una respuesta totalmente funcional para mí:

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}

Joery
fuente

Esto está escrito en MENOS / SASS.

Arslan Ameer

7

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

usuario3849374
fuente

probablemente `` `ul {margen: 0; tipo-estilo-lista: ninguno; } ul li: before {content: "-";} `` `de lo contrario, también afecta a las listas ol

Sasha Bond

5

Aquí está mi versión de violín :

La clase (modernizr) .generatedcontenten <html>prácticamente significa IE8 + y cualquier otro navegador cuerdo.

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS:

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}

biziclop
fuente

3

No sé si hay una mejor manera, pero puede crear un gráfico de viñeta personalizado que represente un guión y luego informar al navegador que desea usarlo en su lista con el tipo de estilo de lista propiedad de . Un ejemplo en esa página muestra cómo usar un gráfico como una viñeta.

Nunca he tratado de usar: antes de la manera que lo ha hecho, aunque puede funcionar. La desventaja es que algunos navegadores antiguos no lo admitirán. Mi reacción instintiva es que esto sigue siendo lo suficientemente importante como para tenerlo en cuenta. En el futuro, esto puede no ser tan importante.

EDITAR: He hecho algunas pruebas con el enfoque del OP. En IE8, no pude lograr que la técnica funcionara, por lo que definitivamente todavía no es un navegador cruzado. Además, en Firefox y Chrome, parece que ignorar la configuración de tipo de estilo de lista en ninguno.

TNi
fuente

3

Mi solución es agregar una etiqueta de extensión adicional con mdash:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

y agregando a css:

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}

Victor Stagurov
fuente

3

De otra manera:

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}

imos
fuente

3

CSS:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

castaño
fuente

1

esto no funciona para artículos que abarcan más de una línea

jenlampton

2

En lugar de usar lu li, usado dl (definition list) and dd. <dd>se puede definir utilizando un estilo css estándar como {color:blue;font-size:1em;}y usar como marcador cualquier símbolo que coloque después de la etiqueta html. Funciona como ul li, pero le permite usar cualquier símbolo, solo tiene que sangrarlo para obtener el efecto de lista sangrado que normalmente obtiene ul li.

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

Te da un código mucho más limpio! De esa manera, ¡podrías usar cualquier tipo de personaje como marcador! Sangría es de aproximadamente -10pxy funciona perfecto!

Carolyne Comtois
fuente

77

Esto es bastante malo por dos razones. En primer lugar, coloca los caracteres de las viñetas directamente en el texto, mezclando contenido y estilo. En segundo lugar, está haciendo mal uso del elemento dl, aquí hay un artículo sobre el uso correcto .

mzgajner

1

Para cualquiera que tenga este problema hoy, la solución es simplemente:

estilo de lista: "- "

Abeja murciélago
fuente

-1

Lo que funcionó para mí fue

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>

C oneil
fuente

Guión de estilo de lista de HTML

Respuestas: