Home>

html - pseudo elements cannot be displayed as desired

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.

html css
  • 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.

Related articles