如何使用css仅显示一半的引导字形图标答案

【问题标题】：How to show only half of bootstrap glyphicon with css如何使用css仅显示一半的引导字形图标
【发布时间】：2015-07-01 18:49:47
【问题描述】：

我想对使用 glyphicon-star 制作的物品进行星级评分，因为不可能有超过一种颜色的字形，是否可以只显示一半？

我正在使用引导程序，并且正在使用更少的资源处理它的源代码。

干杯

    <p>
      <span class="view-stats">{$post.numviews|number_format:0} views</span>
      <span class="view-stars pull-right">
        <span class="glyphicon glyphicon-star star-color"></span>
        <span class="glyphicon glyphicon-star star-color"></span>
        <span class="glyphicon glyphicon-star star-color"></span>
        <span class="glyphicon glyphicon-star star-color"></span>
        <span class="glyphicon glyphicon-star star-color" ></span>
      </span>
      &nbsp;
    </p>

谢谢，这是Less sn-p

 .half {
    position:relative;

    >after {
    content:'';
    position:absolute;
    z-index:1;
    background:white;
    width: 50%;
    height: 100%;
    left: 47%;
    }
}

【问题讨论】：

您有我们可以查看的 HTML 吗？有很多方法可以解决您的问题，但如果没有代码，就很难提供帮助。
请出示您的代码。
添加了部分代码，当然，现在 glyphicon-stars 的数量是静态的，但 db 会给出类似 3.5, 4, 4.5 [...]

标签： css twitter-bootstrap less glyph

【解决方案1】：

演示 - http://www.bootply.com/10XzUrAamb

将 left 更改为 47% 以便根据不同的字体大小进行调整

你可以这样做

.half {
    position:relative;
}
half:after {
    content:'';
    position:absolute;
    z-index:1;
    background:white;
    width: 50%;
    height: 100%;
    left: 47%;
}

【讨论】：

使用相对尺寸可能更好，例如width: 50%，这样我们就可以适应字体大小的变化。