Home>

Pseudo element
dt
dl
It will be displayed.
I want to display an image (pseudo-element) before li. What is wrong?

// HTML
<ul>
  <li>
    <dl>
      <dt>Location</dt>
      <dd>Sapporo City, 001-0001, Japan</dd>
    </dl>
  </li>
      ·
      ·
</ul>
// CSS
li {
  list-style: none;
}
.location :: before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background-image: url ();
  background-repeat: no-repeat;
  background-size: contain;
}


Add the desired image.

Currently, an image is displayed above the location.

  • Answer # 1

    The closing of and missing "." in the class specification are a mistake or something when writing the code.

    :: beforeand:: afterare inserted at the start point or end point inside the specified element.
    If a pseudo element is specified forli

      :: before                   :: after


    If it is, it is normal.


    If the hope of "before li" says in the sense of outside

    ,
    If this HTML code is implemented, there is no choice but to specify:: beforeforul.
    However, it is not preferable to insert an element other thanlidirectly underul, so if this is pushed through, will the questioner allow it? I think that it will be a question of whether to review the code in other element configurations.


    ▼ Additional
    There are a lot of ways to realize it besides pseudo-elements,
    If you just want the questioner to lay side by side using the code in the example,

    liwithposition: relative;
    .location :: beforetoposition: absolute;
    ・ Add.location dltomargin-left: 50px;
    With an additional note,
    You will need to make fine adjustments.
    * Finely adjust the absolute top left value and the margin-left px value according to the actual construction screen.

    li {
      list-style: none;
      position: relative;
    }
    .location :: before {
      position: absolute;
      display: block;
      content: "";
      width: 20px;
      height: 20px;
      background-image: url ();
      background-repeat: no-repeat;
      background-size: contain;
    }
    .location dl {
      margin-left: 50px;
    }

  • Answer # 2

    Because location is a class name, not a tag name,

    location :: before {


    Not

    . location :: before {


    Write a dot before.

  • Answer # 3

    I want to display an image (pseudo-element) before li ≠ I want a layout like an image

    You want to display an image (pseudo-element) on the left side of "Location".

    I think there are various ways, but I will introduce the method using FlexBox.

    li.location {
      list-style: none;
      display: flex;
      align-items: center;
    }
    .location :: before {
      display: block;
      content: "";
      width: 40px;
      height: 40px;
      background-repeat: no-repeat;
      background-size: contain;
      padding-right: 20px;
    }
    dd {
      margin-inline-start: 0;
    }


    Sample

    Please adjust the image size and padding-right accordingly.