Quiero agregar una lista de descripción con un icono de viñeta personalizado para la etiqueta <dt> usando CSS. Intenté varios métodos, pero no funciona. Para <'li'> está funcionando, pero no funcionará con la etiqueta <dt>.

Probé varios métodos, incluidos list-style-image, list-style-type y métodos en línea. Quiero formatearlo usando CSS, porque hay varias listas <dl>.

dt { list-style-image: url("icon.png"); }
<dl>
  <dt><a href="#">Topic 1</a></dt>
  <dd>short description</dd>
</dl>

Quiero la imagen personalizada como viñeta para las etiquetas <dt>, pero no muestra nada en absoluto con los métodos que probé.

0
DisuraRandunu 27 oct. 2019 a las 09:48

3 respuestas

La mejor respuesta

Como un enfoque alternativo a la respuesta principal, lo que estaba tratando de hacer es posible, pero solo funciona en elementos con display: list-item, que dt no tiene por defecto. Entonces agrega eso. Además, la viñeta está a la izquierda del elemento, por lo que debe agregar algo de relleno para evitar que quede fuera de la ventana gráfica. Eso es todo lo que necesitas cambiar.

dt {
  list-style-image: url('https://placehold.it/10x10');
  display:list-item;  /* to make it work */
  margin-left:2em;    /* to make it visible */
}
<dl>
  <dt><a href="#">Topic 1</a></dt>
  <dd>short description</dd>
</dl>
1
Mr Lister 27 oct. 2019 a las 07:46

<dl> sy sus hijos no se pueden diseñar como <ul>/<ol> s.

Un enfoque es agregar otro elemento HTML en <dl> y hacer que actúe como un icono.

dt::before {
  content: url('https://www.gravatar.com/avatar/ce2677d0d36f4b4d4d17d1cc569d0375?s=32&d=identicon&r=PG&f=1');
  width: 32px;
  height: 32px;
  margin-right: 5px;
}


/** Apply some margin left to all dd, as we the image moves the dt a little bit to the right **/

dd {
  margin-left: 47px;
  /** we get the icon's width (see above) + its margin right + add some 10px more**/
}
<dl>
  <dt><a href="#">Topic 1</a></dt>
  <dd>short description</dd>
</dl>

Otra forma es envolver cada <dl> en un <ul> y diseñar su <li>, pero no lo recomiendo, ya que no es un HTML muy semántico. :)

Aquí hay un ejemplo, sin embargo:

ul li {
  list-style-image: url('https://www.gravatar.com/avatar/ce2677d0d36f4b4d4d17d1cc569d0375?s=32&d=identicon&r=PG&f=1');
}
<ul>
  <li>
    <dl>
      <dt><a href="#">Topic 1</a></dt>
      <dd>short description</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt><a href="#">Topic 2</a></dt>
      <dd>short description 2</dd>
    </dl>
  </li>
</ul>
1
Ivanka Todorova 27 oct. 2019 a las 07:06

Propiedad de imagen de estilo de lista para pantallas de elementos de lista. Entonces, si usa esta propiedad, la visualización del elemento principal debe ser un elemento de lista.

0
novruzrhmv 27 oct. 2019 a las 07:02