CSS li margin top not working can't put the li down-CodePudding

I was to put the red circle just right next to the line Sadon Huguet, but he is stuck just 10 pixel above and it's not perfectly aligned, I tried so much thing, but nothing seems to works. Thanks for your time

.vins_wino {
  margin-top: 25px;
  padding-right: 18px;
  color: black;
}

.vin_wino {
  font-size: 17px;
  font-style: normal;
  font-weight: normal;
  border-bottom: dashed black;
  border-bottom-width: 1px;
  height: 30px;
  position: absolute;
  left: 8%;
}

.type_wino {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: 5.5px;
  border: 2px solid black;
  display: flex;
  justify-content: space-between;
}

.price_wino {
  font-weight: bold;
  position: absolute;
  right: 0;
  margin-right: 20px;

<ol  style="list-style-type: none;">
  <li  style="background-color: #ac1e44;"></li>
  <li >Domaine Chapel - Fleurie Charbonnières 2018, 0,75L</li>
  <li >29 €</li>
</ol>

CodePudding user response：

You can also accomplish this using the pseudo-element ::before.

The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML.

Pseudo elements work great for ul's and ol's for custom bullet points.

Read more here

.vins_wino {
  margin-top: 25px;
  padding-right: 18px;
  color: black;
}

.vin_wino {
  font-size: 17px;
  font-style: normal;
  font-weight: normal;
  border-bottom: dashed black;
  border-bottom-width: 1px;
  height: 30px;
  position: absolute;
  left: 8%;
}

li.vin_wino::before {
  content: "";
  background-color: #ac1e44;
  position: absolute;
  left: -2.5em;
  bottom: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid black;
}

.price_wino {
  font-weight: bold;
  position: absolute;
  right: 0;
  margin-right: 20px;
}

<ol  style="list-style-type: none;">
  <li ></li>
  <li >Domaine Chapel - Fleurie Charbonnières 2018, 0,75L</li>
  <li >29 €</li>
</ol>

CodePudding user response：

Use flex:

.vins_wino {
    margin-top: 25px;
    padding-right: 18px;
    color: black;
    display: flex;
}

.type_wino {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-top: 5.5px;
    border: 2px solid black;
    padding-right: 0;
}

.vin_wino {
    font-size: 17px;
    font-style: normal;
    font-weight: normal;
    border-bottom: dashed black;
    border-bottom-width: 1px;
    height: 30px;
    margin-top: 9px;
    margin-left: 5px;
}

.price_wino {
    font-weight: bold;
    flex: auto;
    text-align: end;
    margin-top: 5px;
}

<ol  style="list-style-type: none;">
 <li  style="background-color: #ac1e44;">
  <li >Domaine Chapel - Fleurie Charbonnières 2018, 0,75L</li>
  <li >29 €</li>
 </li>
</ol>