在content：counter（mycounter）之后添加一个点

Question

我想在我的Ol的content：counter（mycounter）之后添加一个点。

没有点的当前状态：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9YQUt2by5wbmcifQ==” alt =“不带点的当前状态”>“ >>

我想如何呈现它：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9XRUtIRS5wbmcifQ==” alt =“我想如何展示它”>

事情是当应用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的情况下添加点。

我想在我的Ol的content：counter（mycounter）之后添加一个点。没有点的当前状态：我想如何演示：问题是当content：counter（mycounter）应用于文本时...

Answer 1