web-dev-qa-db-ja.com

CSSで取り消し線/ラインスルーの太さを変更するにはどうすればよいですか？

CSSでtext-decoration: line-throughを使用していますが、<hr>や画像オーバーレイのような洗練されていないハックなしで線の太さを変える方法を見つけることはできません。

ラインスルーの太さを指定するエレガントな方法はありますか？

htmlcssthicknessline-through
63
1077

これは、不要なラッパー要素を必要としない純粋な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（勾配なし）で動作します。シングルコロン:after構文を使用し、calc()を使用する代わりに負のmargin-top値を手動で書き込む場合はIE8でも動作します。

主な欠点は、これが1行のテキストでのみ機能することです。しかし、ちょっと、あなたはあなたが得ることができるものを取ります;-)

93
daGUY

これは、複数行の取り消し線に対する理想的な解決策がない長年の質問のようです。

便利なことに、CSSグラデーションを使用すると、次のように線の太さを簡単に調整できます。

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

デモと完全なベンダープレフィックスを参照してください： http://codepen.io/pearlchen/pen/dhpx

16
pearlchen

短い答え：いいえ。フォントによって異なりますが、下線の太さも同じです。テキストの太さによって変わります

6
knittl

アイデアはありますが、厚さのレベルごとに要素を追加する必要があります。

html

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

css

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

ところで、2番目のスパンのスペースは特別です-alt + 0160またはalt + 255を使用する必要があります。
ヌルを正確に配置しようとすると、負の上部のピクセル単位も使用できます。

最初にtext-decorationを使用し、次にスタイル<strike>または<del>そして、テキストを移動せずに垂直方向に微調整できるかどうかを確認します。

html

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

css

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

ここでは両方とも正常に機能していますが、移行中のdoctype cause <strike>は廃止されました。

2
Knu

複数行テキストの別のアプローチを見つけました。

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

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

このアプローチでは、画像の繰り返し（幅1ピクセル、高さnピクセル）を想定しています。また、フォントサイズに依存せずに動作します。

唯一の欠点-背景がテキストの下にレンダリングされます。

1
Goodnickoff

私はこれが古いことを理解していますが、ネストされたスパンタグを使用してそれを行う方法があります：

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

取り消し線はフォントのサイズに依存するため、外側のスパンを2倍にすると、線の幅が2倍になります。次に、内側を半分に減らす必要があります。垂直方向の配置が必要であるか、行が高すぎるため、ほとんどオーバーラインのように見えます。

動作中： http://jsfiddle.net/moodleboy/deep3qw8/

で働く Chrome/ FF。ただし、Safari、IE10、またはOperaではありません。 MacではChromeで動作しますが、Windowsでは動作しません。

1
Paul

いや.

ただし、取り消し線の色がテキストの色と同じである場合、背景でカスタム画像を使用することで簡単に逃げることができます。

異なる色が必要な場合は、カスタムの取り消し線画像をオーバーレイすることが唯一の方法です。

1
Matt

ここで適切な方法が見つからなかったため、 linear-gradient および exCSS length units でbackground-imageを使用しました=。

残念ながら、これは、異なるフォントフェースを使用すると、わずかに異なる位置に取り消し線が表示されることを意味します（フォントの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>
0
ksav

線の太さは、フォント（ファミリ、サイズなど）によって決まります。これを変更するためのCSSの規定はありません http://www.w3.org/TR/REC-CSS1/#text-decoration

0
Bradley Mountford

これは質問に答えませんが、スクリプトを使用した独自の取り消し線の欠如を解決するという点で関連しています。私は純粋主義者ではありませんが、これは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>
0
underdog