Indent On Second Line Of 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

Solution 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>

Solution 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>