Indent on second line of <li> text

问题

I need to use both discs and list-style-type: lower-roman; to style a list.

But because I'm using content: "•"; in a :before pseudo element to create the disc effect, the second line of the <li> text does not line up.

Is there an easier way to do this?

eg:

i•Some list text which
goes onto the second line            //need this to be in line with the text above
   i  sub list text1
   ii sub list text2

I'm currently using

ul>li:before {
    content: "•";
}
ol{
    margin-left: 24px;
}
ol, ul{
   list-style-type: lower-roman
}

<ul>
   <li>Some list text which goes onto the second line
       <ol>
           <li>sub list text1</li>
           <li>sub list text1</li>
       <ol>
   </li>
</ul>

回答1:

You can apply a padding-left to the ul > li to indent it as a whole, make it's position: relative and use position: absolute and left on the :before pseudo-element to adjust the horizontal position of the "•" in relation to the left end of the li:

ul>li {
  padding-left: 15px;
  position: relative;
}

ul>li:before {
  content: "•";
  position: absolute;
  left: 5px;
}

ol {
  margin-left: 24px;
}

ol,
ul {
  list-style-type: lower-roman
}

<ul>
  <li>Some list text which goes onto the second line. Some list text which goes onto the second line. Some list text which goes onto the second line
    <ol>
      <li>sub list text1</li>
      <li>sub list text1</li>
      <ol>
  </li>
</ul>

回答2:

You need to use list-style-position

ul>li:before {
    content: "•";
    margin-right:5px;

    
}
ul{
    list-style-position: inside;
}
ol{
    margin-left: 24px;
    list-style-position: outside;  /* or NOT, it depends on what you like  to do */
}
ol, ul{
   list-style-type: lower-roman
}

<ul>
   <li>Some list text which goes onto the second linegoes onto the second linegoes onto the second linegoes onto the second linegoes onto the second linegoes onto the second line
       <ol>
           <li>sub list text1</li>
           <li>sub list text1</li>
       <ol>
   </li>
</ul>

来源：https://stackoverflow.com/questions/61920249/indent-on-second-line-of-li-text