Блог

У меня возникли проблемы с выравниванием маркированных точек в моем проекте react для класса, с тех пор как я использовал изображение для замены своих маркированных точек, оно появляется над абзацем, рядом с которым оно должно быть.

вот мой HTML:

   <ul className="list">
<li className="star">
  <div className="key">
    <p className="keyTitle">THINKING</p>
    <p className="keyPara">
      In particular the programme focused on prblem solving, design thinking
      and computational thinking.
    </p>
  </div>
</li>
  

и вот мой CS:

 body{
  background-color: #d3d3d3;
  height: 634px;
}

.key{
  margin-top: 1rem;
}
ul{
  list-style-type: none;
}

li:before{
  content: "";
  display: inline-block;
  height: 40px;
  width: 40px;
  background-size: 40px;
  background-image: url("LogoListImage.png");
  background-repeat: no-repeat;
  margin-right: 5px;
}

.keyTitle{
  font-weight: bold;
  font-family: Nunito;
  margin-bottom: 1px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
}
.keyPara{
  font-family: OpenSans;
  margin: 0px;
}

.title{
  font-family: Nunito;
}

.container{
  width: 100%;
}
  

Я думаю, что это простое решение, но я просто не могу понять это, поэтому, если кто-нибудь может мне помочь, это было бы абсолютно потрясающе

Чтобы использовать атрибут before, вам нужно указать значения absolute и top, left .

добавить в тег ul:

      position: relative
  

добавить в тег li:

      top: 0; left:0; content:"*" (content is example)
  

Ваш код, например:

  ul {
  list-style-type: none;
  position: relative;
}

li:before {
  content: "*";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background-size: 40px;
  background-image: url("LogoListImage.png");
  background-repeat: no-repeat;
  margin-right: 5px;
}