Прозрачный штрих-код на текст

Мне нужно реализовать прозрачный strikethrought по тексту с CSS, поэтому мне не нужно заменять тег <h1> тегом <img>. Мне удалось реализовать сквозной текст с помощью CSS, но я не могу сделать его прозрачным.

Желаемый эффект:

Text with a transprent strikethrought line

Что у меня:

body{
    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
    background-size:cover;
}
h1{
    font-family:arial;
    position:relative;
    display:inline-block;
}
h1:after{
    content:'';
    position:absolute;
    width:100%;
    height:2px;
    left:0; top:17px;
    background:#fff;
}
<h1>EXAMPLE</h1>

Ответы

Ответ 1

Вы можете достичь прозрачного strikethrought в тексте только с помощью CSS с использованием свойств line-height и overflow:hidden;.

Демо: Прозрачный промах CSS через

Выход:

Text with a transparent cut out strikethrough with CSS

Объяснение:

  • Шаг 1: скрыть дно текста <h1> с помощью
    height:0.52em; overflow:hidden; с помощью em единиц, чтобы высота адаптировалась к размеру шрифта, который вы используете для тега <h1>
    fiddle
  • Шаг 2: "переписать" содержимое в псевдоэлементе, чтобы свести к минимуму разметку и предотвратить повторение содержимого. Вы можете использовать атрибут пользовательских данных, чтобы сохранить весь контент в разметке и не нужно редактировать CSS для каждого заголовка.
    fiddle
  • Шаг 3: выровняйте текст псевдоэлемента сверху, так что только внизу отображается line-height:0;
    fiddle

Соответствующий код:

body{
    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
    background-size:cover;
}
h1{
    font-family:arial;
    position:relative;
}
h1 span, h1:after{
    display:inline-block;
    height:0.52em;
    overflow:hidden;
    font-size:5em;
}

h1:after{
    content: attr(data-content);   
    line-height:0;
    position:absolute;
    top:100%; left:0;
}
<h1 data-content="EXAMPLE" ><span>EXAMPLE</span></h1>

Ответ 2

Вы можете добиться этого в браузерах webkit, используя маскировку

CSS

h1 {
    -webkit-mask-image: linear-gradient(0deg, white 20px, transparent 20px,  transparent 24px, white 24px);
}

демо

демонстрация hover