html - 开箱即用的文本后的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

你的行高有误。

应该有: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