Comment créer une surbrillance personnalisée dans css?

^Quelque chose comme ça - utilise-t-il: après? (wasnt capable de le faire pour plusieurs lignes)

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

Source

2017-04-25 user7214732

vous pouvez utiliser la propriété de position sur les deux h3 et: après – Ibu

Le ':: after' pseudo-élément possède deux caractères. Un deux-points est une ancienne syntaxe qui ne devrait plus être utilisée. https://developer.mozilla.org/en-US/docs/Web/CSS/::after – Rob

Oui, vous pouvez utiliser un pseudo-élément. Voici un moyen absolument positionné dans le h3 avec un z-index négatif.

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>

Source

2017-04-25 23:44:43

Le pseudo-élément ':: after' a deux points. Un deux-points est une ancienne syntaxe qui ne devrait plus être utilisée. https://developer.mozilla.org/en-US/docs/Web/CSS/::after – Rob

@Rob ouais je sais, mais les anciennes versions d'IE ne reconnaissent pas ':: after' et ne fonctionnent qu'avec': après », pourtant tous les nouveaux navigateurs supportent les deux. Jusqu'à ce que les navigateurs modernes cessent de supporter ': after', je préfère couvrir mes bases et utiliser': after' pour la conformité du navigateur. https://msdn.microsoft.com/library/cc304078(v=vs.85).aspx –

Disons-le de cette façon. Si vous ** devez ** supporter Microsoft Internet Explorer version 8 ou plus, utilisez ': after'. Aucune autre raison. Sinon, quittez Microsoft Internet Explorer 8 et versions antérieures. – Rob

pour cette solution:

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

Voici le code dans l'action:

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

Dites-moi comment vous allez.

Vive

Source

2017-04-26 00:37:04 Syfer

Comment créer une surbrillance personnalisée dans css?

Répondre

Questions connexes