montyaction / HTML-del_and_ins_as_a_tooltip

HTML tags <del> & <ins> as a tooltip with pure CSS.

HTML DEL & INS Tag as a Tooltip

This is a example for HTML del and ins tag as a Tooltip.This example help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

• Build out the project to the designs provided

Screenshot

After Hover

Before Hover

Links

• Solution URL: HTML del & ins as a tooltip
• Live Site URL: html_del&ins_as_a_tooltip

My process

Built with

• HTML
• Ins Tag
• Del Tag
• Hover Effect
• Responsive Design
• Sass - Css preprocesor

What I learned

Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.

To see how you can add code snippets, see below:

    <P>
        The
        <span>
            <ins>quick</ins>
            <del>speedy</del>
        </span>
        brown for
        <span>
            <ins>jumped</ins>
            <del>leapt</del>
        </span>
        over the
        <span>
            <ins>lazy</ins>
            <del>deadbeat</del>
        </span>
        dog
    </P>

ins{
  animation: fadeInIns .25s 1s ease-in forwards;
}

@keyframes fadeInIns {
    from {
        background: transparent;
    }
    to {
        background: #6db723;
    }
}

Useful resources

• W3 School - This helped me for my basic knowledge. I really liked this pattern and will use it going forward.
• MDN - This is an amazing article which helped me finally understand meaning each code. I'd recommend it to anyone still learning this concept.

Author

• Portfolio - montyaction
• Frontend Mentor - @montyaction
• Twitter - @MontyKanwar19
• Instagram - frontend_action