How to set custom markers for a <dl> element

I know that the <ul> element can be styled with custom markers, but can it be done with <dl>?

What marker does a dl have?

Messing around, I came up with this:

<style>
  dt::before {
    content: ">";
    background: lightgray;
    border-radius: 1ch;
    padding-inline: 1ch;
    margin-inline-end: 1ch;
  }
</style>

<h1>The dl, dd, and dt elements</h1>

<p>These three elements are used to create a description list:</p>

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>
1 Like

Thanks a lot @kevinSmith, it did work!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.