Add Bullet Styling to Dd Element

Add bullet styling to dd element

Easiest way is to change the properties on your <dd>

dd {
    display: list-item;
    list-style-type: disc;
    }

Works in every browser.

See this article: http://www.quirksmode.org/css/display.html

How to style dt and dd so they are on the same line?

dl {
  width: 100%;
  overflow: hidden;
  background: #ff0;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #cc0;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #dd0;
  padding: 0;
  margin: 0
}

<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  <dt>Venus</dt>
  <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

Custom bullet icon for dt tag using CSS not working

As an alternative approach to the main answer, what you were trying to do is possible, but it works only on elements with display: list-item, which dt does not have by default. So add that. Also, the bullet is to the left of the element, so you should add some padding to prevent it from being outside the viewport. That's all you need to change.

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>

How to number every dt on my dl or use bullets to list them

The above answers aren't wrong, but then the question is actually a html code related.
Here is what I figured out and it worked:

<dl>
    <span>•Apple</span>
    <dd>He like eating at least apples daily</dd>
    <span>•Orange Juice</span>
    <dd>This is the description of the second dt</dd>
</dl>

Or more correctly:

<dl>
    <dt>•First Item</dt>
    <dd>This is the description of the first item </dd>
    <dt>•Second Item</dt>
    <dd>This is the description of the second item</dd>
</dl>

Different types of symbols:
https://www.htmlsymbols.xyz/unicode/U+2022

How can I get an HTML definition list to respect with list-style-type styling rules?

From the Mozilla docs:

The list-style-type CSS property specifies appearance of a list item
element. As it is the only one who defaults to display:list-item, this
is usually a <li> element, but can be any element with this display
value.

You can apply display:list-item to your dt element in CSS, and then also apply a list-style-type option to it as well.

dt.wanna-be-list {
  display:list-item;
  list-style-type: square;
}

How to align dt and dd side-by-side using flexbox with multiple dd underneath the other?

How about setting flex-wrap on the dl and have a width > 50% for dd
along with margin-left: auto?

See demo below:

dl {

  display: flex;

  flex-wrap: wrap;

}

dt {

  width: 33%;

}

dd {

  margin-left: auto;

  width: 66%;

}

<dl>

  <dt>Authors</dt>

  <dd>John Doe</dd>

  <dd>Jane Doe</dd>

  <dd>Max Mustermann</dd>

</dl>

<dl>

  <dt>Publishers</dt>

  <dd>John Doe</dd>

  <dd>Jane Doe</dd>

  <dd>Max Mustermann</dd>

</dl>

Can I use CSS to add a bullet point to any element?

While you can use a :before pseudo-selector to add a "-" or "•" character in front of your element, it doesn't really make your element behave like a bullet point. Your element may look like a bullet point, but that's just a dirty hack, really, and should be avoided!

To make your element both (1) look like a bullet point and (2) behave like a bullet point, you should set the display of that element to list-item. Optionally, you can also set list-style-type (default : disc) and list-style-position (default : outside) attributes to modify the behavior / look-and-feel of your list item.

If your element spans multiple lines, list-style-position should be the default value outside if you want all of your lines to align to the right of your bullet point. In that case, however, it is possible you don't see your actual bullet point, as it would be to the left of the content of your element. If this happens, you can just add a left margin to move the element's content to the right, and your bullet point should show up.

---

EXAMPLE 1

h1 {
    display: list-item; /* This has to be "list-item"                                          */
    margin-left : 1em;  /* If you use default list-style-position 'outside', you may need this */
}

<h1>
  Your H1 text should go here. If it consists of multiple
  lines, the left alignment of all lines is the same.
</h1>
<h1>
  Here's another item.
</h1>

HTML list-style-type dash

You could use :before and content: bearing in mind that this is not supported in IE 7 or below. If you're OK with that then this is your best solution. See the Can I Use or QuirksMode CSS compatibility tables for full details.

A slightly nastier solution that should work in older browsers is to use an image for the bullet point and just make the image look like a dash. See the W3C list-style-image page for examples.

How to make a HTML list appear without the bullets signs using CSS only?

ul { list-style: none; }

That gets rid of the bullet points. Now you can go ahead and assign styles to space them out like in your example, if that's what you really wanted:

li { padding: 5px 0; }

If you also don't want the list indented after removing the bullets, it will take another bit, like this:

ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

If you dont set both margin and padding to 0, it will either look right in FF or IE, but not both

---

Related Topics