html-lists - 在内容 :counter(mycounter) 后加一个点

Question

我想在我的 Ol 中的 content:counter(mycounter) 之后添加一个点。

没有点的当前状态:

我想如何呈现它:

问题是当应用 content:counter(mycounter) 时，文本会删除点。

css 会解释大部分...

/*Circle with number on the article-page*/

.article .article-info ol {
  list-style:none;
  counter-reset:mycounter;
  padding:0;
}

.article .article-info ol li {
  position:relative; 
  padding:5px 0;
}

.article .article-info ol li:before {
  content:counter(mycounter); 
  counter-increment:mycounter;
  position:absolute;
  top:0;
  left:-30px;
  width:25px;
  line-height:20px;
  border-radius:50%;
  color:#B71A8B;
  text-align:center;
  margin-top:7px;
  font-weight:bold;
  font-size:1.2em
	margin-left:30px
}

.article .article-info ol li{
 	font-size: 16px;
  line-height: 1.5em;
  font-weight: 100;
  opacity:.8;
}

所以我想以某种方式添加类似这样的内容 content:counter(mycounter, ".")。

我知道 list-style:none 这就是原因，但是有没有可能在不删除 list-style:none 的情况下添加点；

Answer 1

ol {
  list-style: none;
  counter-reset: mycounter;
  margin: 0;
  padding: 0
}

ol li {
  position: relative;
  padding-left: 25px;
}

ol li:before {
  position: absolute;
  left: 0;
  content: counter(mycounter);
  counter-increment: mycounter;
}

ol li:after {
  content: '';
  position: absolute;
  left: 10px;
  height: 4px;
  width: 4px;
  background-color: red;
  border-radius: 100%;
  bottom: 5px;
}

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>