How to control the thickness / thickness of the tag 'strike, del, s', the famous line above the text

4

Today I was developing a project and I got to the point where for the first time in my life I decided to use the <strike> HTML tag. I do not know if it was the font style I was using, but the line above the text was barely noticeable. Which led me to the question:

Is there any way to control the size (thickness / thickness) of the line above the text?

A tag "strike" adiciona uma <strike>linha por cima de um texto</strike>.
    
asked by anonymous 23.03.2017 / 19:21

1 answer

2

Here is a workaround for using the <strike> , <del> or <s> more malleable tags and gives us more control not only for the line thickness but also for the color of the line and to adapt it for various types of needs:

  

Additional information:

     

According to w3schools , it appears that the <strike> tag is not supported in HTML5 . To use this tag in HTML5 we should use <del> or <s> instead.

.strikeText {
    position: relative;
}
.strikeText::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 0.20rem;   /* Muda o tamanho da espessura da linha para o desejado aqui */
    background-color: red;
}
Lorem <span class="strikeText">IPSUM DOLOR</span> sit amet
<br/>
<h1>Lorem <span class="strikeText">IPSUM DOLOR</span> sit amet</h1>
    
23.03.2017 / 19:21