Wie erstelle ich eine benutzerdefinierte Hervorhebung in CSS?

^So ähnlich - benutzt es: nach? (konnte nicht für mehrere Zeilen)

.home-about h3:after{ 
margin-top:-15px; 
content: " "; 
background:#d7edf4; 
z-index: 0; 
}

Quelle

2017-04-25 user7214732

könnten Sie die Eigenschaft position auf beiden h3 verwenden und: nach – Ibu

The ':: after' Pseudoelement verfügt über zwei Doppelpunkte. Ein Doppelpunkt ist eine alte Syntax, die nicht mehr verwendet werden sollte. https://developer.mozilla.org/en-US/docs/Web/CSS/::after – Rob

Ja, Sie können ein Pseudo-Element verwenden. Hier ist ein Weg absolut positioniert in der h3 mit einem negativen Z-Index.

h3 { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
h3:after { 
 
    content: " "; 
 
    background: #d7edf4; 
 
    z-index: -1; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: .4em; 
 
}

<h3>text</h3>

Quelle

2017-04-25 23:44:43

Das ':: after'-Pseudoelement hat zwei Doppelpunkte. Ein Doppelpunkt ist eine alte Syntax, die nicht mehr verwendet werden sollte. https://developer.mozilla.org/en-US/docs/Web/CSS/::nachher – Rob

@Rob yeah Ich weiß, aber ältere Versionen von IE erkennen nicht ':: nach' und arbeiten nur mit': nachher, aber alle neueren Browser unterstützen beide. Bis moderne Browser aufhören, '' nachher "zu unterstützen, würde ich lieber meine Basen abdecken und ': nachher' für die Browser-Compliance verwenden. https://msdn.microsoft.com/library/cc304078(v=vs.85).aspx –

Sagen wir es so. Wenn Sie ** Microsoft Internet Explorer Version 8 oder älter ** unterstützen müssen, verwenden Sie ': after'. Kein anderer Grund. Andernfalls beenden Sie die Unterstützung von Microsoft Internet Explorer 8 und älter. – Rob

geben diesem einen Versuch:

::selection { 
    background: #ffb7b7; /* WebKit/Blink Browsers */ 
} 
::-moz-selection { 
    background: #ffb7b7; /* Gecko Browsers */ 
}

Unten ist der Code in Aktion:

.Pink::selection {background: #ffb7b7; /* WebKit/Blink Browsers */} 
 
.Pink::-moz-selection {background: #ffb7b7; /* Gecko Browsers */} 
 

 
.DarkRed::selection {background: #ff0000; /* WebKit/Blink Browsers */} 
 
.DarkRed::-moz-selection {background: #ff0000; /* Gecko Browsers */}

<p class="Pink">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique quam in ex posuere, eu commodo velit sodales. Vestibulum at volutpat lorem, quis interdum diam. Phasellus metus sem, lobortis eu neque eget, tincidunt hendrerit purus. Sed mollis orci dapibus lectus blandit, eget fringilla sapien ullamcorper. Aenean accumsan justo sit amet sapien finibus tincidunt. Nam vitae purus ligula. Nunc quis neque id enim ultricies euismod at id metus. In hac habitasse platea dictumst. Sed suscipit, augue id tempus blandit, orci sem faucibus turpis, ac volutpat sem enim eleifend dui. Maecenas congue augue at lacus viverra rhoncus. </p> 
 

 
<p class="DarkRed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique quam in ex posuere, eu commodo velit sodales. Vestibulum at volutpat lorem, quis interdum diam. Phasellus metus sem, lobortis eu neque eget, tincidunt hendrerit purus. Sed mollis orci dapibus lectus blandit, eget fringilla sapien ullamcorper. Aenean accumsan justo sit amet sapien finibus tincidunt. Nam vitae purus ligula. Nunc quis neque id enim ultricies euismod at id metus. In hac habitasse platea dictumst. Sed suscipit, augue id tempus blandit, orci sem faucibus turpis, ac volutpat sem enim eleifend dui. Maecenas congue augue at lacus viverra rhoncus. </p>

Lass mich wissen wie du gehst.

Prost

Quelle

2017-04-26 00:37:04 Syfer

Wie erstelle ich eine benutzerdefinierte Hervorhebung in CSS?

Antwort

Verwandte Themen