Implementierungstechniken zur Verwendung von CSS-Pseudoelementen zum Erstellen eines Tooltips mit einem Dreieck

Der folgende Editor zeigt Ihnen eine Implementierungsmethode zur Verwendung von CSS-Pseudoelementen zum Erstellen einer Eingabeaufforderungsbox mit einem Dreieck. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf.

CSS-Pseudoelemente bieten eine Möglichkeit, einige gängige Funktionen ohne redundante DOM-Elemente zu implementieren.

Das Folgende ist die DOM-Struktur:
Das Folgende ist der entsprechende CSS-Stil:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

CSS-Code Kopieren Sie den Inhalt in die Zwischenablage

.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;    
}

Die obige Methode zur Verwendung von CSS-Pseudoelementen zum Erstellen einer Eingabeaufforderungsbox mit einem Dreieck ist das, was die Das ist alles, was der Herausgeber Ihnen mitgeteilt hat. Ich hoffe auch, dass Sie die PHP-Chinese-Website unterstützen.

Weitere Implementierungstechniken zur Verwendung von CSS-Pseudoelementen zum Erstellen einer Eingabeaufforderungsbox mit einem Dreieck finden Sie auf der chinesischen PHP-Website für verwandte Artikel!