Implementation techniques for using CSS pseudo-elements to create a tooltip with a triangle

The following editor will bring you an implementation method of using CSS pseudo-elements to create a prompt box with a triangle. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

CSS pseudo-elements are very useful. They provide a way to implement some common functions without redundant DOM elements. Let’s use it to implement a tooltip with a triangle.

The following is the DOM structure:
The following is the corresponding CSS style:

XML/HTML CodeCopy content to clipboard

<p class="tooltip-wrapper bottom">    
    <p class="arrow"></p>    
    <p class="content">    
        This is content    
    </p>    
</p>

##CSS CodeCopy Content to clipboard

.tooltip-wrapper {    
    position: absolute;    
    z-index: 9999;    
    padding: 5px;    
    background: white;    
    border: 1px solid #7d7d7d;    
    border-radius: 5px;    
}    
.tooltip-wrapper .arrow,    
.tooltip-wrapper .arrow:after {    
    position: absolute;    
    display: block;    
    width: 0;    
    height: 0;    
    border-color: transparent;    
    border-style: solid;    
}    
.tooltip-wrapper .arrow {    
    border-width: 11px;    
}    
.tooltip-wrapper .arrow:after {    
    content: "";    
    border-width: 10px;    
}    
.tooltip-wrapper.bottombottom .arrow {    
    top: -11px;    
    left: 50%;    
    margin-left: -11px;    
    border-top-width: 0;    
    border-bottom-color: #7d7d7d;    
}    
.tooltip-wrapper.bottombottom .arrow:after {    
    top: 1px;    
    margin-left: -10px;    
    border-top-width: 0;    
    border-bottom-color: white;    
}

The above method of using CSS pseudo-elements to create a prompt box with a triangle is all the content shared by the editor. I hope it can give you a reference, and I hope you will support the PHP Chinese website.

For more implementation techniques on using CSS pseudo-elements to create a prompt box with a triangle, please pay attention to the PHP Chinese website for related articles!