Wired strike thru – can you fix?

[kristtee]

Hi
All seems well, yet the line strike thru the text. What is wrong, could not find out. Can someone?
Appreciate

<h2>kristtee</h2>

HTML
<div class="strike-heading black">
  <p>Who We Are</p>
</div>

CSS

.strike-heading{
  text-align: center; position: relative; text-transform: uppercase;
}
*{
  box-sizing: border-box;
}
div{
  display:block;
}
.strike-heading.black:after {
  border-bottom: 1px solid #333;
}
.strike-heading:after {
  position: absolute; content: ""; left: 0; right:0; top: 50%; bottom: 50%; z-index; -1;
}
.strike-heading.black p {
  background: #333;
}
.strike-heading p {
  display: table; margin: 0 auto; line-height: 1; padding: 10px 50px; font-size: 13px; color: #fff;
  border-radius: 5px; font-family: sans-serif;
}

[__]

I have no idea what your question is. However, all of your css seems centered around the goal of adding a strike-though effect* to the text — if that is not what you want, then why are you using this styling at all?

* in a very odd, complex way… do you not realize there is a strike element?

[Paulie_D]

Probably trying to create a strike ‘font’ look, you know the type of lettering with a clear stripe through it…I’m sure you’ve seen it.

As for the strike element

MDN

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

There are now s and del elements.

MDN – s – https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s

MDN – del – https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del

[__]

There are now s and del elements.

very true. thanks!

[Author]

Posts