如何用css显示只有一半的bootstrap glyphicon

sat*_*hia 1 css glyph less twitter-bootstrap

我想对使用glyphicon-star制作的项目进行星级评定,因为不可能有多种颜色的字形,是否只能显示一半?

半星级

我正在使用bootstrap,我正在用更少的源处理它的源代码.

干杯

    <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>
Run Code Online (Sandbox Code Playgroud)

谢谢,这是Less小部分

 .half {
    position:relative;

    >after {
    content:'';
    position:absolute;
    z-index:1;
    background:white;
    width: 50%;
    height: 100%;
    left: 47%;
    }
}
Run Code Online (Sandbox Code Playgroud)

以下是它的呈现方式

Vit*_*des 5

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

更改left47%以便使用不同的字体大小进行调整

你可以做这样的事情

.half {
    position:relative;
}
half:after {
    content:'';
    position:absolute;
    z-index:1;
    background:white;
    width: 50%;
    height: 100%;
    left: 47%;
}
Run Code Online (Sandbox Code Playgroud)

  • 可能更好的想法使用相对尺寸,例如`width:50%`,以便我们可以适应字体大小的变化. (2认同)