CSS Gradient Hintergrund für Text

Question

Ich versuche, diesen Effekt mit CSS zu erreichen:

Also, habe ich diese Auszeichnung:

h2 { 
 
    color:red; 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+100&1+44,0+100 */ 
 
background: -moz-linear-gradient(left, rgba(0,0,0,1) 1%, rgba(0,0,0,1) 44%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ 
 
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 44%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
background: linear-gradient(to right, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 44%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000',GradientType=1); /* IE6-9 */}

<h2>Cool is for people who don't accept themselves</h2>

Jede Idee Wie kann ich das erreichen?

Answer 1

können Sie verwenden linear-gradient(to right, black 60%, white 60%)

div { 
 
    color: red; 
 
    font-size: 25px; 
 
    padding: 20px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
    background: linear-gradient(to right, black 60%, white 60%); 
 
}

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, at.</div>

Oder können Sie zwei Pseudo-Elemente verwenden :before und :after

div { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    padding: 20px; 
 
    color: red; 
 
    font-size: 25px; 
 
    width: 300px; 
 
} 
 
div:before, div:after { 
 
    content: ''; 
 
    left: 0; 
 
    top: 0; 
 
    position: absolute; 
 
    background: black; 
 
    height: 100%; 
 
    width: 60%; 
 
    z-index: -1; 
 
} 
 
div:after { 
 
    width: 100%; 
 
    background: white; 
 
    z-index: -2; 
 
}

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, at.</div>