This is the fourth day of my participation in the August Text Challenge.More challenges in August

preface

Hello everyone, welcome to big Ice’s blog, today we are going to talk about adding fake elements to elements.

As we all know, one of the most convenient ways to expand the click hot zone is to add a fake element to the current click element. The fake element click will also be applied to the current element. Today, when I added a fake element to the IMG tag, I couldn’t find the fake element.

Problems began

The code is as follows:

    <style>
        .logo{
            width: 36px;
            height: 36px;
            position: relative;
        }
        .logo::before{
            content: "";
            position: absolute;
            top: -10px;
            right: -10px;
            bottom: -10px;
            left: -10px;
            background-color: rgba(138.248.165.0.5);
        }
    </style>


    <img src="./img/logo.jpg" alt="" class="logo">

Copy the code

The implementation effect is as follows:

Where are my pseudo-elements? Why are pseudo elements not in effect??

Problem analysis

It made me wonder if I had misspelled the word. After I double-checked, I was sure it wasn’t a misspelled word. And I thought about it and I came up with this:

The pseudo-element is not a DOM node, and its content is inserted before and after the current element content, not before and after the current element. Pseudo-elements don’t work for elements that don’t have content and descendant elements.

I immediately pulled out the W3C document:

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element’s document tree content. The ‘content’ property, in conjunction with these pseudo-elements, specifies what is inserted.

The document is clearly written. The before and: after pseudo-elements are used to specify the content before and after the content of the element document tree. No new nodes are added.

Consider the following illustration:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

A self-closing tag such as img, which has no content and no descendant elements, is undefined at the moment (depending on the browser) and will be defined in the future.

How do you solve it?

Problem solving

It’s a good idea to add a content attribute to the current element because the current element doesn’t have a content attribute, but since browsers may differ, we’ll need a safer way to do it:

Wrap a tag around it and add a fake element to the parent element.

The code is as follows:

    <style>
        .logo{
            width: 36px;
            height: 36px;
            position: relative;
        }
        .logo::before{
            content: "";
            position: absolute;
            top: -10px;
            right: -10px;
            bottom: -10px;
            left: -10px;
            background-color: rgba(138.248.165.0.5);
        }
    </style>

    <div class="logo">
        <img src="./img/logo.jpg" alt="" class="logo">
    </div>

Copy the code

The implementation effect is as follows:

Perfect!

Afterword.

Hello, I am the South Pole ice cube, a technology and appearance level proportional to the front-end engineer, advocating to solve front-end problems, I hope my blog has helped you. Pay attention to me and walk together on the front road. Hey ~ 😛