Изменить вес шрифта свойства CSS `content`

Question

Мне нужно изменить вес шрифта части селектора контента CSS3.Просто часть, а не все.Вот как настроен мой код:

HTML: <p id="first-second"><a href="#"><strong>FIRST</strong> SECOND</a></p>

CSS: p#first-second:after {content: "FIRST SECOND"}

Я использую этот метод созданияградиент по тексту.

Если возможно, я бы хотел решить эту проблему с помощью CSS, даже если это будет хакерским.Как видите, сильный текст уже обернут в элемент <strong>, и я могу добавить идентификаторы или классы или что-то еще, чтобы изменить его.Если CSS не исправит это, то моим следующим предпочтением будет jQuery, а затем JavaScript.

Answer 1

Вот краткий пример эффекта градиента, примененного к тексту с использованием -webkit-mask-image: http://jsfiddle.net/joshvogt/t4Ger/

p strong{
    -webkit-mask-image: 
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), 
to(rgba(0,0,0,0)));
    font-weight:900;
}

p{
    color:red;
    font-size:30px;
    text-shadow:2px 2px 2px black;
}