Як змінити товщину закреслення / проходження в CSS?

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

Чи є якийсь елегантний спосіб вказати товщину прохідного проходу?

Ось чистий метод 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комбінований з a height, замість a 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() .

Основним недоліком є ​​те, що це працює лише на одному рядку тексту. Але привіт, ти береш те, що можеш отримати ;-)

Це здається давнім питанням без ідеального рішення для багаторядкових закреслення.

Зручно, використовуючи градієнти CSS, ви можете легко відрегулювати товщину лінії так:

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

Подивіться демонстраційну версію та повну префікс постачальника тут: http://codepen.io/pearlchen/pen/dhpxu

коротка відповідь: ні. це залежить від шрифту, однаково для товщини підкреслення - воно змінюється залежно від товщини тексту

У мене є ідея, але для цього потрібно додати додатковий елемент для кожного рівня товщини.

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.
Ви також можете використовувати піксельну одиницю на негативному верху, коли ull намагається точно розташувати її.

Існує ще одна альтернатива, яка передбачає використання спочатку текстового оздоблення, а потім стилю <strike>або, <del>і подивіться, чи зможете ви штовхнути його вертикально, не переміщуючи текст ним.

html

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

css

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

Обидва тут працюють нормально, але пам’ятайте, що використання перехідного типу доктрити <strike>застаріло.

Я знайшов інший підхід до багаторядкового тексту:

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 висота). Також він працює незалежно від розміру шрифту.

Лише один недолік - фонові рендери під текстом.

Ні.

Однак якщо закреслений колір збігається з кольором тексту, ви можете легко уникнути, використовуючи власне зображення у фоновому режимі.

Якщо вам потрібні різні кольори, тоді накладання власного закресленого зображення - єдиний спосіб.

Я усвідомлюю, що це старе, але є спосіб зробити це за допомогою вкладених тегів 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.

Товщина лінії визначається шрифтом (сімейство, розмір тощо). У CSS немає положень щодо зміни цього http://www.w3.org/TR/REC-CSS1/#text-decoration

Це не дає відповіді на запитання, але є актуальним, оскільки вирішує відсутність унікального закреслення за допомогою сценаріїв. Я не пурист, але я вважаю, що це рішення для 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>

У наші дні це дуже просто, використовуйте наступний CSS

text-decoration-thickness: 1px;

Ви можете регулювати товщину відповідно до своїх потреб.

Може змінити колір так

text-decoration-color: red;

Підтримується основними браузерами

Я не зміг знайти відповідний метод тут, тому використав фонове зображення з лінійним градієнтом та колишніми одиницями довжини CSS .

На жаль, це означає, що використання різних граней шрифту призведе до закреслення в дещо іншому положенні (наприклад, якщо шрифти мають різну висоту x).

.container {
  width: 300px;
}

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

.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>