字体太棒了半风格CSS

Question

我想知道是否有人可以帮助我/如果这是可能的。

我想一半的风格（使用halfstyle.js）在YouTube字体真棒图标，该图标是像YouTube标志（下半部分红色，上半白）

我想在悬停时进行此操作，但我似乎甚至无法像默认那样进行此操作。

JSFiddle

body { 
 
    background: rgba(0,0,0,.4); 
 
} 
 
.fa { 
 
    font-size: 10em; 
 
    color: white; 
 
} 
 
.fa-youtube {} 
 

 
.halfStyle { 
 
    position:relative; 
 
    display:inline-block; 
 
    font-size:80px; /* or any font size will work */ 
 
    color: transparent; /* hide the base character */ 
 
    overflow:hidden; 
 
    white-space: pre; /* to preserve the spaces from collapsing */ 
 
} 
 
.halfStyle:before { /* creates the top part */ 
 
    display:block; 
 
    z-index:2; 
 
    position:absolute; 
 
    top:0; 
 
    height: 50%; 
 
    content: attr(data-content); /* dynamic content for the pseudo element */ 
 
    overflow:hidden; 
 
    pointer-events: none; /* so the base char is selectable by mouse */ 
 
    color: #f00; /* for demo purposes */ 
 
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */ 
 
} 
 
.halfStyle:after { /* creates the bottom part */ 
 
    display:block; 
 
    position:absolute; 
 
    z-index:1; 
 
    top:0; 
 
    height: 100%; 
 
    content: attr(data-content); /* dynamic content for the pseudo element */ 
 
    overflow:hidden; 
 
    pointer-events: none; /* so the base char is selectable by mouse */ 
 
    color: #000; /* for demo purposes */ 
 
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */ 
 
}

<i class="fa fa-youtube textToHalfStyle"></i>

Answer 1

你不能这样做，对于FontAwesome i.fa图标，因为，已经HalfStyle是基于::after和::before伪元素。此外，FontAwesome使用:after。您需要创建另一个元素，并为此提供:hover选项。

片段

$(function() { 
 
    $(".textToHalfStyle").each(function() { 
 
    $(this).parent().append('<div class="cloned"></div>'); 
 
    $(".cloned").append($(this).clone()); 
 
    }); 
 
});

body { 
 
    background: rgba(0,0,0,.4); 
 
    font-size: 160px; 
 
} 
 
.fa { 
 
    color: #fff; 
 
} 
 
.cloned { 
 
    opacity: 0; 
 
    position: absolute; 
 
    display: block; 
 
    z-index: 1; 
 
    left: 8px; 
 
    top: 76px; 
 
    height: 0.65em; 
 
    overflow: hidden; 
 
} 
 
.cloned .fa { 
 
    position: relative; 
 
    top: -68px; 
 
    color: #f00; 
 
} 
 
.fa:hover ~ .cloned, 
 
.cloned:hover { 
 
    opacity: 1; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
 
<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
<i class="fa fa-youtube textToHalfStyle"></i>