Is there anyone knows what is the CSS property of this thing called? Because I want to remove it. This happened when I clicked on the text. So, I'm wondering is it caused by the browser default styling or the stylesheet itself. I'll show my HTML and CSS codes below. Feel free to leave a comment if there's anything that you want to know (code,...)

<section >
    <div >
      <div >
        <div >
          <img src="images/logo.svg" alt="">
        </div>
        <div >
          <h1>
            A history of everything you copy
          </h1>
          <p>Clipbaord allows you to track and organize everything you copy. Instantly access your clipboard on all your devices.</p>
        </div>
        <div >
          <div>
            <button ><a href="">Download for iOS</a></button>
            <button ><a href="">Download for Mac</a></button>
          </div>
        </div>
      </div>
    </div> <!--End container-->
  </section>

.section {
    &.section-main {
        background: url("../images/bg-header-mobile.png");
        background-repeat: no-repeat;
        background-size: cover;

        @media screen and (min-width: 1440px) {
            background: url("../images/bg-header-desktop.png");
            background-repeat: no-repeat;
            background-size: cover;
        }

        .sectionWrap {
            padding: 9.5rem 0.5rem 8rem;

            .imgWrapper {
                &.logo {
                    width: 10rem;
                    height: 10rem;
                    margin: 0 auto 5.5rem;

                    img {
                        width: 100%;
                    }
                }
            }

            .section__intro {
                h1 {
                    margin-bottom: 1.8rem;
                }

                p {
                    margin-bottom: 4rem;
                }
            }

            .iosMac-download-wrapper {
                div {
                    display: flex;
                    flex-direction: column;

                    button {
                        border-radius: 2.5rem;
                        color: $white;
                        font-size: 1.5rem;
                        padding: 1.5rem;
                        text-shadow: 0 0 0.2rem #f5f5f5;

                        &:not(:last-child) {
                            margin-bottom: 2rem;
                        }

                        &.btn-ios-download {
                            background: $primary;
                            box-shadow: 0 0.2rem 0rem hsl(171, 68%, 25%), 0 0.2rem 0.5rem hsl(171, 68%, 25%);
                        }
                        &.btn-mac-download {
                            background: $secondary;
                            box-shadow: 0 0.2rem 0rem hsl(171, 68%, 25%), 0 0.2rem 0.5rem hsl(233, 46%, 36%);
                        }
                    }
                }
            }

            @media screen and (min-width: 1440px) {
                padding: 13rem 0.5rem 10rem;

                .imgWrapper {
                    &.logo {
                        width: 13rem;
                        height: 13rem;
                    }
                }

                .section__intro {
                    h1 {
                        margin-bottom: 2.5rem;
                    }

                    p {
                        margin-bottom: 5rem;
                    }
                }

                .iosMac-download-wrapper {
                    div {
                        flex-direction: row;
                        justify-content: center;
                        gap: 3rem;

                        button {
                            border-radius: 3rem;
                            padding: 2rem 3.5rem;

                            &:not(:last-child) {
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }
        }
    } // End .section-main
}

CodePudding user response：

It’s called the caret. But it’s not actually a CSS style.

You have probably inadvertently enabled caret browsing mode in your browser by pressing F7. Just press the key again to disable it. This works in Firefox and in Chromium.

This feature is in fact so notorious for confusing users that browsers usually display a prompt when it is enabled. The prompt can be disabled, in which case it becomes much easier to accidentally enable the mode.