Search code examples
htmlcssinternet-explorer-11

how can I create a css double line-through in ie 11?

I would like to create a double line-through in IE11, but I'm having some trouble. It seems that the text-decoration is limited in IE11. Currently I'm using a single line, but since we will use some kanji it may be confused as part of the kanji itself: a double line would be better.

*.strike {
    text-decoration: line-through;
}

How can I achieve it?

Solution

  • Use a positioned pseudo-element

    span.double-strike {
  position: relative;
}

span.double-strike:after {
  content: '';
  position: absolute;
  top: 50%;
  height: 1px;
  left: 0;
  border-top: 1px solid green;
  border-bottom: 1px solid red;
  width: 100%;
}
    <span>
  This is my text with <span class="double-strike">
two lines through it</span> in a paragraph because of crazy weird
<span class="double-strike">requirements</span>
</span>

    Note with this option each strike can have a different color...as an added bonus.