Question

如果只使用CSS可以做到这一点会更好。提前谢谢。

Answer 1

如果你想通过纯css这样做，你应该手动设置（如前面的答案）但如果你想动态添加星星，你应该使用这样的东西，那里我想，通过纯css动态无法做到这一点。

$('ul li').each(function() {
  var index = $(this).index() + 1;
  var star = $('<span/>')
  for (i = 0; i < index; i++) {
    star.append('*');
  }
  $(this).prepend(star);
});

var l = $('ul li:last-child span').width();
$('ul li span').css('width', l);

ul li {
  list-style: none;
}

ul li a {
  display: inline;
}

ul li span {
    padding-right: 5px;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
</ul>

Answer 2

这是唯一可用于您想要的结果的CSS解决方案：

您可以使用list-style:@counter-style获得结果，并根据需要使用其选项对其进行自定义。

但此@counter-style目前仅适用于Firefox 33 +

@counter-style cs-symbolic {
  system: symbolic;
  symbols: '*';
  range: ;
  suffix: " ";
}

ul {
  list-style: cs-symbolic;
  padding-left: 30%;
  float: left;
}

<ul id="demo-list" class="demo-numeric">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

希望这对你有所帮助。如果你可以使用脚本，那将是最好的，在接下来的几年中，支持将会到来但是现在，它不是一个完美的方式。

Answer 3

有一种方法可以做，但是你必须逐行手动，因为你只使用CSS。

＆＃13;

df.2016

＆＃13;

df.2016 = df.2016[-1,]

bind_rows(df.2017, df.2016) %>%
  complete(expand(.,team,year),fill = list(ppg = 0)) %>%
  arrange(desc(year)) %>% as.data.frame()

# team year ppg
# 1   Duke 2017  65
# 2    UNC 2017  53
# 3    UVA 2017  74
# 4 Xavier 2017  63
# 5   Duke 2016   0     -- missing row
# 6    UNC 2016  82
# 7    UVA 2016  61
# 8 Xavier 2016  71

＆＃13;

Answer 4

请检查https://codepen.io/mgkrish/pen/EEVpON动态李样式

<script
      src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
    <ol style="text-align: left;">
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>list 4</li>
    <li>list 5</li>
    </ol>

    ol.HideStyle{
       list-style : none;
    }

    $(document).ready(function() {
        $("ol").addClass("HideStyle");

    var listLength= $( "li" ).length;
        for(i=0;i<=listLength;i++){
         var str= "*";
         var x=  str.repeat(i)
          $("ol li:nth-child(" + i + ")").prepend(x);
          console.log("X",x)

        }

      });

是否有可能制作这样的自定义项目符号？

4 个答案: