CSS Display One Character in 2 Colors

This question already has an answer here:

Is it possible to apply CSS to half of a character? 18 answers

---

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(red 49%, blue 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

填写您自己的供应商前缀。

---

One solution would be:

HTML:

<span class="half" title="B">B</span>

(see that you have to set an attribute value)

CSS:

  .half {
        font-size: 90px;
        font-weight: bold;
        position: relative;
        color: blue;
        line-height: 1em;
    }

    .half:before {
        position:absolute;
        content:''attr(title)'';
        color: red;
        height: .5em;
        overflow: hidden;
    }

The problem is that every browser calculates the .5em value differently

链接地址: http://www.djcxy.com/p/23780.html

上一篇: 字体真棒百分比宽度堆叠图标

下一篇: CSS以2种颜色显示一个字符