CSS => Pseudo-Element

Introduktion

Pseudo-element, precis som pseudoklasser, läggs till i en CSS-väljare men istället för att beskriva ett speciellt tillstånd, tillåter de dig att räcka och utforma vissa delar av ett html-element.

Till exempel riktar :: första bokstäver-pseudo-elementet endast den första bokstaven i ett blockelement som specificeras av väljaren.

Syntax

selector :: pseudo-element {egenskap: värde}

parametrar

pseudo-elementet	Beskrivning
`::after`	Sätt in innehåll efter innehållet i ett element
`::before`	Sätt in innehåll innan innehållet i ett element
`::first-letter`	Väljer den första bokstaven i varje element
`::first-line`	Väljer den första raden för varje element
`::selection`	Matchar den del av ett element som väljs av en användare
`::backdrop`	Används för att skapa en bakgrund som döljer det underliggande dokumentet för ett element i det översta lagrets stack
`::placeholder`	Låter dig utforma platshållarteksten för ett formelement (Experimental)
`::marker`	För tillämpning av listformatattribut på ett givet element (Experimental)
`::spelling-error`	Representerar ett textsegment som webbläsaren har flaggat som felstavat (Experimental)
`::grammar-error`	Representerar ett textsegment som webbläsaren har flaggat som grammatiskt felaktigt (Experimental)

Anmärkningar

Ibland kommer du att se dubbelt kolon ( :: ) i stället för bara en ( : ). Detta är ett sätt att skilja pseudo-klasser från pseudo-element, men vissa äldre webbläsare som Internet Explorer 8 stöder bara enstaka kolon ( : ) för pseudo element.
Man kan bara använda ett pseudo-element i en väljare. Det måste visas efter de enkla väljarna i uttalandet.
Pseudo-element är inte en del av DOM, därför är det inte riktat av :hover eller andra användarhändelser.

Pseudo-Element

Pseudo-element läggs till väljare men istället för att beskriva ett speciellt tillstånd tillåter de dig att utforma vissa delar av ett dokument.

content krävs för att pseudo-element ska kunna återges; attributet kan emellertid ha ett tomt värde (t.ex. content: "" ).

div::after {
  content: 'after';
  color: red;
  border: 1px solid red;
}

div {
  color: black;
  border: 1px solid black;
  padding: 1px;
}

div::before {
  content: 'before';
  color: green;
  border: 1px solid green;
}

Pseudo-element i listor

Pseudo-element används ofta för att ändra utseendet på listor (mest för oordnade listor, ul ).

Det första steget är att ta bort standardlistorna:

ul {
  list-style-type: none;
}

Sedan lägger du till den anpassade stylingen. I det här exemplet skapar vi lutningslådor för kulor.

li:before {
  content: "";
  display: inline-block;
  margin-right: 10px; 
  height: 10px;
  width: 10px;
  background: linear-gradient(red, blue);
}

html

<ul>
   <li>Test I</li>
   <li>Test II</li>
</ul>

Resultat

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

CSS
Pseudo-Element

Sök…