Как изменить толщину вычеркивания / сквозной линии в CSS?

Question

Я использую text-decoration: line-through в CSS, но я не могу найти какой-либо способ изменить толщину линии без таких неумелых хаков, как <hr> или наложения изображений.

Есть ли какой-нибудь элегантный способ указать толщину проходного отверстия?

Answer 1

Вот чистый метод CSS, который не требует никаких ненужных элементов-оболочек. В качестве дополнительного бонуса вы можете не только регулировать толщину вычеркивания, но и контролировать его цвет отдельно от цвета текста:

.strikeout {
  font-size: 4em;
  line-height: 1em;
  position: relative;
}
.strikeout::after {
  border-bottom: 0.125em solid red;
  content: "";
  left: 0;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}

<span class="strikeout">Struck out text</span>

Используйте цвета RGBa, чтобы сделать зачеркнутый полупрозрачным:

.strikeout {
  font-size: 4em;
  position: relative;
}
.strikeout::after {
  border-bottom: 0.125em solid rgba(255, 0, 0, 0.5);
  content: "";
  left: 0;
  line-height: 1em;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}

<span class="strikeout">Struck out text</span>

Или даже сделать зачеркнутый градиент! Просто используйте background в сочетании с height вместо border:

.strikeout {
  font-size: 4em;
  line-height: 1em;
  position: relative;
}
.strikeout::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 0, 0, 1), rgba(0, 255, 0, 1), rgba(0, 0, 255, 1), rgba(255, 255, 255, 0));
  content: "";
  height: 0.125em;
  left: 0;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}

<span class="strikeout">Struck out text</span>

Это работает в IE9 (без градиента) и выше - или даже в IE8, если вы используете синтаксис :after с двоеточием и вручную пишете отрицательное значение margin-top вместо использования calc().

Основным недостатком является то, что это работает только на одной строке текста. Эй, возьми то, что можешь; -)

Answer 2

Это, кажется, давний вопрос без идеального решения для многострочных зачеркиваний.

Удобно, используя CSS-градиенты, вы можете легко настроить толщину линии следующим образом:

strike {
    text-decoration: none;
    background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
}

См. Демо и полный префикс поставщика здесь: http://codepen.io/pearlchen/pen/dhpxu

Answer 3

краткий ответ: нет. это зависит от шрифта, оно одинаково для толщины подчеркивания - оно меняется в зависимости от толщины текста

Answer 4

У меня есть идея, но для этого потребуется добавить дополнительный элемент для каждого уровня толщины.

HTML

<span><strike>test test</strike></span><br />  
<span id="test"><strike>           </strike></span>

CSS

span {height:1em}
#test {position:relative;top:-1.3em}

Кстати, пробелы во втором пролете являются специальными - вам придется использовать alt + 0160 или alt + 255.
Вы также можете использовать пиксельные единицы на отрицательном верху, когда будете пытаться точно его расположить.

---

Существует еще одна альтернатива, которая включает в себя использование сначала text-decor , а затем стиль <strike> или <del> и посмотрите, можете ли вы подтолкнуть его вертикально, не перемещая текст вместе с ним.

HTML

<span><strike>test test</strike></span>

1022 * CSS *

span {text-decoration:line-through;color:red}
strike {position:relative;top:1px}

Оба работают нормально, но не забудьте использовать переходный тип документа, поскольку <strike> устарела.

Answer 5

Я нашел другой подход для многострочного текста:

span {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
  background-repeat: repeat-x;
  background-position: center; 
}

http://output.jsbin.com/weqovenopi/1/

Этот подход предполагает повторение изображения (ширина 1px и высота npx). Также он работает независимо от размера шрифта.

Единственный недостаток - рендеринг фона под текстом.

Answer 6

Я понимаю, что это старый, но есть способ сделать это, используя вложенные теги span:

<span style="text-decoration: line-through; font-size: 2em;">
  <span style="font-size: 0.5em; vertical-align: middle;">
    Striked Text
  </span>
</span>

Зачеркивание зависит от размера шрифта, поэтому, если вы удвоите внешний интервал, это сделает линию в два раза толще. Затем вам нужно уменьшить внутреннюю половину. Выравнивание по вертикали необходимо, иначе линия слишком высока, поэтому кажется, что она почти наложена.

В действии: http://jsfiddle.net/moodleboy/deep3qw8/

Работает в Chrome / FF, но не в Safari, IE10 или Opera. Работает на Chrome на Mac, но не на Windows.

Answer 7

номер

Однако, если зачеркнутый цвет совпадает с цветом текста, вы можете легко использовать пользовательское изображение на заднем плане.

Если вам требуются разные цвета, то наложение пользовательского зачеркнутого изображения - единственный путь.

Answer 8

Я не мог найти подходящий метод здесь, поэтому я использовал фоновое изображение с линейным градиентом и ex единицы длины CSS .

К сожалению, это означает, что при использовании разных граней шрифта зачеркивание будет выполняться в несколько ином положении (если шрифты имеют разную высоту x).

.container {
  width: 300px;
}

.multiline-strikethrough {
  display: inline;
  background-image: linear-gradient(transparent 0.8ex, red 0.8ex, red 1.5ex, transparent 1.5ex);
}

.alt-1 {
  font-family: sans-serif;
  font-size: 2rem;
}

.alt-2 {
  font-family: sans-serif;
  font-size: 4rem;
  line-height 1;
}

<div class="container">
  <p class="multiline-strikethrough">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>

<div class="container">
  <p class="multiline-strikethrough alt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>

<div class="container">
  <p class="multiline-strikethrough alt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>

Answer 9

Это не отвечает на вопрос, но уместно в том смысле, что решает проблему отсутствия уникального сквозного использования скриптов. Я не пурист, но я считаю, что это решение для X-браузера.

<html>
<script src="/js/jquery/jquery.js"></script>
<script>
function do_strike_out(idx)
{
  $(this).wrap("<span style='position:relative;left:0px;top:0px;'>").
    before( "<span style='margin-top:10px;border-top:1px solid #FF0000;"+
      "position:absolute;width:100%;left:0px;'></span>" ).
    wrap("<span style='position:relative;left:0px;top:0px;'>");
}
$(function(){
  $('.strike_out').each(do_strike_out);
});
</script>
<body>
A jquery hack to do colored strike-through <span class='strike_out'>STRIKE-OUT</span>, which, I realize does not answer your question, sorry, but may be of intest for others.
</body>
</html>

Answer 10

Толщина линии определяется шрифтом (семейство, размер и т. Д.). В CSS нет условий для изменения этого http://www.w3.org/TR/REC-CSS1/#text-decoration