文本开箱后的Css

Question

我有一个有线问题，我有一个带有ul和li的常规导航，我正在尝试制作一个里面有数字的li红色框，但问题是这个数字是出于某种原因开箱即用的，问题是什么？

这是代码：

#mainHeader .rightNav {
  float: right;
  li {
    position: relative;
  }
  img {
    vertical-align: middle;
  }
  li:nth-child(4)::after {
    content:attr(data-value);
    color:#fff;
    border-radius: 2px;
    background-color: #d94a3e;
    text-align: center;
    width: 18px;
    height: 18px;
    position: absolute;
    top:0;
    right:0;
  }
}

http://plnkr.co/edit/ys7Wy3EJPlA4VlXDt6hE?p=preview

Answer 1

用以下代替你的风格：）

#mainHeader .rightNav li:nth-child(4)::after {
      content: attr(data-value);
      color: #fff;
      border-radius: 2px;
      background-color: #d94a3e;
      text-align: center;
      position: relative;
      top: -10px;
      right: 0;
      padding: 1px 4px;
}

Answer 2

你的行高有误。

应该有：line-height: normal;

将其添加到#mainHeader .rightNav li:nth-child(4)::after

将您的CSS更新为：

    #mainHeader .rightNav li:nth-child(4)::after {
      content: attr(data-value);
      color: #fff;
      border-radius: 2px;
      background-color: #d94a3e;
      text-align: center;
      width: 18px;
      height: 18px;
      position: absolute;
      top: 0;
      right: 0;
      line-height: normal;
    }

Sample link